/* ==========================================================================
   Portal theme (super admin + vendor portals, sign-in pages)
   Loaded after main.css (Vali / Bootstrap 4.1). Restyles the Bootstrap and
   Vali classes the existing pages use, and defines the new shell
   (.sf-sidebar / .sf-topbar / .sf-main). Light and dark via [data-theme].
   ========================================================================== */

:root {
    --sf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sf-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;

    --sf-bg: #f5f6fa;
    --sf-surface: #ffffff;
    --sf-surface-2: #f8fafc;
    --sf-surface-3: #f1f5f9;
    --sf-border: #e6e8ef;
    --sf-border-strong: #d5d9e2;
    --sf-text: #0f172a;
    --sf-text-2: #475569;
    --sf-muted: #8a94a6;

    --sf-primary: #4f46e5;
    --sf-primary-hover: #4338ca;
    --sf-primary-soft: #eef2ff;
    --sf-primary-soft-text: #4338ca;
    --sf-primary-ring: rgba(79, 70, 229, .22);
    --sf-accent: #7c3aed;

    --sf-success: #059669;
    --sf-success-soft: #ecfdf5;
    --sf-success-text: #047857;
    --sf-danger: #dc2626;
    --sf-danger-soft: #fef2f2;
    --sf-danger-text: #b91c1c;
    --sf-warning: #d97706;
    --sf-warning-soft: #fffbeb;
    --sf-warning-text: #b45309;
    --sf-info: #0284c7;
    --sf-info-soft: #f0f9ff;
    --sf-info-text: #0369a1;
    --sf-neutral-soft: #f1f5f9;
    --sf-neutral-text: #475569;

    --sf-sidebar-bg: #0f1629;
    --sf-sidebar-border: rgba(255, 255, 255, .06);
    --sf-sidebar-text: #aab4c8;
    --sf-sidebar-text-strong: #ffffff;
    --sf-sidebar-section: #5f6b85;
    --sf-sidebar-hover: rgba(255, 255, 255, .06);
    --sf-sidebar-active: rgba(129, 140, 248, .16);
    --sf-sidebar-active-text: #c7d2fe;

    --sf-radius-sm: 8px;
    --sf-radius: 12px;
    --sf-radius-lg: 16px;
    --sf-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --sf-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --sf-shadow: 0 8px 24px -6px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);
    --sf-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .18);

    --sf-sidebar-w: 264px;
    --sf-sidebar-w-collapsed: 76px;
    --sf-topbar-h: 64px;
    --sf-ease: cubic-bezier(.2, .8, .2, 1);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --sf-bg: #0b0f1a;
    --sf-surface: #121826;
    --sf-surface-2: #161d2e;
    --sf-surface-3: #1b2336;
    --sf-border: #232c40;
    --sf-border-strong: #2e3850;
    --sf-text: #e6e9f2;
    --sf-text-2: #a3adc2;
    --sf-muted: #6f7a92;

    --sf-primary: #818cf8;
    --sf-primary-hover: #a5b4fc;
    --sf-primary-soft: rgba(129, 140, 248, .14);
    --sf-primary-soft-text: #c7d2fe;
    --sf-primary-ring: rgba(129, 140, 248, .3);
    --sf-accent: #a78bfa;

    --sf-success: #34d399;
    --sf-success-soft: rgba(52, 211, 153, .12);
    --sf-success-text: #6ee7b7;
    --sf-danger: #f87171;
    --sf-danger-soft: rgba(248, 113, 113, .12);
    --sf-danger-text: #fca5a5;
    --sf-warning: #fbbf24;
    --sf-warning-soft: rgba(251, 191, 36, .12);
    --sf-warning-text: #fcd34d;
    --sf-info: #38bdf8;
    --sf-info-soft: rgba(56, 189, 248, .12);
    --sf-info-text: #7dd3fc;
    --sf-neutral-soft: rgba(148, 163, 184, .12);
    --sf-neutral-text: #cbd5e1;

    --sf-sidebar-bg: #0a0e18;
    --sf-sidebar-border: rgba(255, 255, 255, .05);

    --sf-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --sf-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --sf-shadow: 0 8px 24px -6px rgba(0, 0, 0, .5);
    --sf-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body.sf-body {
    font-family: var(--sf-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--sf-text);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .25s ease, color .25s ease;
}

.sf-body h1, .sf-body h2, .sf-body h3, .sf-body h4, .sf-body h5, .sf-body h6 {
    font-family: var(--sf-font);
    color: var(--sf-text);
    font-weight: 650;
    letter-spacing: -.01em;
}

.sf-body a { color: var(--sf-primary); transition: color .15s ease; }
.sf-body a:hover { color: var(--sf-primary-hover); text-decoration: none; }
.sf-body hr { border-color: var(--sf-border); }
.sf-body code { color: var(--sf-accent); background: var(--sf-primary-soft); padding: .1em .35em; border-radius: 6px; }
.sf-body ::selection { background: var(--sf-primary-ring); }

.sf-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.sf-body ::-webkit-scrollbar-thumb { background: var(--sf-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.sf-body ::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Shell: sidebar
   -------------------------------------------------------------------------- */
.sf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sf-sidebar-w);
    background: var(--sf-sidebar-bg);
    border-right: 1px solid var(--sf-sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .28s var(--sf-ease), transform .28s var(--sf-ease);
}

.sf-sidebar__brand {
    height: var(--sf-topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    white-space: nowrap;
    border-bottom: 1px solid var(--sf-sidebar-border);
    flex-shrink: 0;
}
.sf-sidebar__logo {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, .6);
    color: #fff; font-size: 16px;
}
.sf-sidebar__brand small { display: block; font-size: 11px; font-weight: 500; color: var(--sf-sidebar-section); letter-spacing: .02em; }

.sf-sidebar__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 24px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.sf-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border: 0; }

.sf-nav { list-style: none; margin: 0; padding: 0; }
.sf-nav__section {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--sf-sidebar-section);
    padding: 18px 12px 6px;
    white-space: nowrap;
}
.sf-nav__link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 10px;
    color: var(--sf-sidebar-text) !important;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.sf-nav__link:hover { background: var(--sf-sidebar-hover); color: var(--sf-sidebar-text-strong) !important; }
.sf-nav__link.is-active { background: var(--sf-sidebar-active); color: var(--sf-sidebar-active-text) !important; }
.sf-nav__link.is-active::before {
    content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: #818cf8;
}
.sf-nav__icon { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; opacity: .9; }
.sf-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sf-nav__caret { font-size: 11px; opacity: .6; transition: transform .25s var(--sf-ease); }
.sf-nav__item.is-open > .sf-nav__link .sf-nav__caret { transform: rotate(90deg); }

.sf-nav__sub {
    list-style: none; margin: 0; padding: 0 0 0 22px;
    overflow: hidden; max-height: 0;
    transition: max-height .3s var(--sf-ease);
}
.sf-nav__item.is-open > .sf-nav__sub { max-height: 600px; }
.sf-nav__sub .sf-nav__link { font-size: 13.5px; padding: 7px 12px 7px 20px; font-weight: 450; }
.sf-nav__sub .sf-nav__link::after {
    content: ''; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%; background: currentColor; opacity: .45; transition: opacity .15s, transform .15s;
}
.sf-nav__sub .sf-nav__link.is-active { background: transparent; color: #fff !important; }
.sf-nav__sub .sf-nav__link.is-active::before { display: none; }
.sf-nav__sub .sf-nav__link.is-active::after { opacity: 1; background: #818cf8; transform: scale(1.3); }

.sf-sidebar__foot { padding: 12px; border-top: 1px solid var(--sf-sidebar-border); }
.sf-sidebar__foot .sf-nav__link { margin: 0; }

/* Collapsed (desktop) */
@media (min-width: 992px) {
    .sf-collapsed .sf-sidebar { width: var(--sf-sidebar-w-collapsed); }
    .sf-collapsed .sf-sidebar__brand { padding: 0 20px; }
    .sf-collapsed .sf-sidebar__brand-text,
    .sf-collapsed .sf-nav__label,
    .sf-collapsed .sf-nav__caret,
    .sf-collapsed .sf-nav__sub { display: none; }
    .sf-collapsed .sf-nav__section { font-size: 0; padding: 12px 0 4px; }
    .sf-collapsed .sf-nav__section::after { content: ''; display: block; height: 1px; margin: 0 14px; background: var(--sf-sidebar-border); }
    .sf-collapsed .sf-nav__link { justify-content: center; padding: 11px 0; }
    .sf-collapsed .sf-nav__icon { font-size: 17px; }
    .sf-collapsed .sf-main, .sf-collapsed .sf-topbar { margin-left: var(--sf-sidebar-w-collapsed); }
    .sf-collapsed .sf-topbar { left: var(--sf-sidebar-w-collapsed); }

    /* Flyout sub-menu on hover */
    .sf-collapsed .sf-nav__item { position: relative; }
    .sf-collapsed .sf-nav__item:hover > .sf-nav__sub {
        display: block; position: fixed; left: calc(var(--sf-sidebar-w-collapsed) - 6px); max-height: none;
        min-width: 210px; padding: 8px; margin-top: -44px;
        background: var(--sf-sidebar-bg); border: 1px solid var(--sf-sidebar-border); border-radius: 12px;
        box-shadow: var(--sf-shadow-lg); z-index: 1050;
        animation: sf-pop .16s var(--sf-ease);
    }
    .sf-collapsed .sf-nav__item:hover > .sf-nav__sub .sf-nav__label { display: inline; }
}

/* Off-canvas (mobile/tablet) */
@media (max-width: 991.98px) {
    .sf-sidebar { transform: translateX(-100%); box-shadow: none; }
    .sf-nav-open .sf-sidebar { transform: translateX(0); box-shadow: var(--sf-shadow-lg); }
}
.sf-overlay {
    position: fixed; inset: 0; background: rgba(9, 12, 22, .5);
    backdrop-filter: blur(2px);
    z-index: 1035; opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
@media (max-width: 991.98px) {
    .sf-nav-open .sf-overlay { opacity: 1; visibility: visible; }
}

/* --------------------------------------------------------------------------
   Shell: top bar + main
   -------------------------------------------------------------------------- */
.sf-topbar {
    position: fixed; top: 0; right: 0; left: var(--sf-sidebar-w);
    height: var(--sf-topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 24px;
    background: color-mix(in srgb, var(--sf-bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sf-border);
    z-index: 1030;
    transition: left .28s var(--sf-ease), background-color .25s ease;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .sf-topbar { background: var(--sf-bg); }
}
@media (max-width: 991.98px) { .sf-topbar { left: 0; padding: 0 16px; } }

.sf-topbar__title { font-weight: 600; font-size: 15px; color: var(--sf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sf-topbar__spacer { flex: 1; }
.sf-topbar__actions { display: flex; align-items: center; gap: 6px; }

.sf-icon-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-grid; place-items: center;
    border-radius: 10px; border: 1px solid transparent;
    background: transparent; color: var(--sf-text-2) !important;
    font-size: 16px; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.sf-icon-btn:hover { background: var(--sf-surface); border-color: var(--sf-border); color: var(--sf-text) !important; }
.sf-icon-btn:active { transform: scale(.94); }
.sf-icon-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--sf-primary-ring); }

.sf-theme-toggle .fa-moon { display: none; }
:root[data-theme="dark"] .sf-theme-toggle .fa-sun { display: none; }
:root[data-theme="dark"] .sf-theme-toggle .fa-moon { display: inline-block; }

.sf-user {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 4px 4px; margin-left: 6px;
    border-radius: 999px; border: 1px solid var(--sf-border);
    background: var(--sf-surface); color: var(--sf-text) !important;
    cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease;
}
.sf-user:hover { box-shadow: var(--sf-shadow-sm); border-color: var(--sf-border-strong); }
.sf-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
    font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
}
.sf-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.sf-user__meta { line-height: 1.2; text-align: left; }
.sf-user__name { font-weight: 600; font-size: 13px; }
.sf-user__org { font-size: 11.5px; color: var(--sf-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) { .sf-user__meta, .sf-user .fa-chevron-down { display: none; } .sf-user { padding: 3px; } }

.sf-main {
    margin-left: var(--sf-sidebar-w);
    padding: calc(var(--sf-topbar-h) + 28px) 28px 40px;
    min-height: 100vh;
    transition: margin-left .28s var(--sf-ease);
}
@media (max-width: 991.98px) { .sf-main { margin-left: 0; padding: calc(var(--sf-topbar-h) + 20px) 16px 32px; } }

/* --------------------------------------------------------------------------
   Page header (Vali .app-title)
   -------------------------------------------------------------------------- */
.sf-body .app-title {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    background: transparent; box-shadow: none; padding: 0; margin: 0 0 24px;
    border: 0;
}
.sf-body .app-title h1 {
    display: flex; align-items: center; gap: 12px;
    font-size: 22px; font-weight: 700; margin: 0; color: var(--sf-text); letter-spacing: -.02em;
}
.sf-body .app-title h1 > i, .sf-body .app-title h1 > .fa, .sf-body .app-title h1 > [class*="fa-"] {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: inline-grid; place-items: center; font-size: 17px;
    background: var(--sf-primary-soft); color: var(--sf-primary);
}
.sf-body .app-title p { margin: 4px 0 0; color: var(--sf-muted); font-size: 13.5px; }
.sf-body .app-title h1 + p { padding-left: 52px; }
.sf-body .app-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 999px;
    padding: 6px 14px; margin: 0; font-size: 12.5px; color: var(--sf-muted); text-transform: none;
}
.sf-body .app-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--sf-border-strong); }
.sf-body .app-breadcrumb .breadcrumb-item.active { color: var(--sf-text-2); }

/* --------------------------------------------------------------------------
   Cards (Vali .tile, Bootstrap .card)
   -------------------------------------------------------------------------- */
.sf-body .tile, .sf-body .card {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-xs);
    color: var(--sf-text);
    transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.sf-body .tile { padding: 22px 24px; margin-bottom: 24px; }
@media (max-width: 575.98px) { .sf-body .tile { padding: 16px; } }
.sf-body .tile .tile-title, .sf-body .tile-title {
    font-size: 16px; font-weight: 650; margin-bottom: 18px; color: var(--sf-text);
}
.sf-body .tile .tile-title-w-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sf-body .tile .tile-title-w-btn .title { font-size: 16px; font-weight: 650; margin: 0; }
.sf-body .tile .tile-footer {
    border-top: 1px solid var(--sf-border); margin: 20px -24px -22px; padding: 16px 24px;
    background: var(--sf-surface-2); border-radius: 0 0 var(--sf-radius-lg) var(--sf-radius-lg);
}
.sf-body .card-header, .sf-body .card-footer {
    background: var(--sf-surface-2); border-color: var(--sf-border); color: var(--sf-text);
}
.sf-body .card-header:first-child { border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0; }
.sf-body .card-footer:last-child { border-radius: 0 0 var(--sf-radius-lg) var(--sf-radius-lg); }
.sf-body .card-title { font-weight: 650; }

.sf-hover-lift { transition: transform .25s var(--sf-ease), box-shadow .25s var(--sf-ease); }
.sf-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }

/* Vali dashboard widgets */
.sf-body .widget-small {
    display: flex; align-items: center; gap: 16px;
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-xs); padding: 18px; margin-bottom: 24px; color: var(--sf-text);
    transition: transform .25s var(--sf-ease), box-shadow .25s var(--sf-ease);
}
.sf-body .widget-small:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }
.sf-body .widget-small .icon {
    width: 52px; height: 52px; min-width: 52px; border-radius: 14px; padding: 0;
    display: grid; place-items: center; font-size: 22px;
    background: var(--sf-primary-soft); color: var(--sf-primary);
}
.sf-body .widget-small.danger .icon, .sf-body .widget-small.danger.coloured-icon .icon { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-body .widget-small.warning .icon, .sf-body .widget-small.warning.coloured-icon .icon { background: var(--sf-warning-soft); color: var(--sf-warning); }
.sf-body .widget-small.info .icon, .sf-body .widget-small.info.coloured-icon .icon { background: var(--sf-info-soft); color: var(--sf-info); }
.sf-body .widget-small.success .icon { background: var(--sf-success-soft); color: var(--sf-success); }
.sf-body .widget-small .info { padding: 0; flex: 1; }
.sf-body .widget-small .info h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sf-muted); font-weight: 600; margin: 0 0 4px; }
.sf-body .widget-small .info p { margin: 0; font-size: 22px; font-weight: 700; color: var(--sf-text); letter-spacing: -.02em; }
.sf-body .widget-small.coloured-icon { background: var(--sf-surface); color: var(--sf-text); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.sf-body .btn {
    font-family: var(--sf-font);
    font-weight: 600; font-size: 13.5px; letter-spacing: 0;
    border-radius: 10px; padding: .5rem 1rem;
    border-width: 1px;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.sf-body .btn.btn-block { display: flex; }
.sf-body .btn:active { transform: translateY(1px) scale(.99); }
.sf-body .btn:focus, .sf-body .btn.focus { box-shadow: 0 0 0 3px var(--sf-primary-ring); }
.sf-body .btn-sm, .sf-body .btn-group-sm > .btn { padding: .32rem .65rem; font-size: 12.5px; border-radius: 8px; gap: .35rem; }
.sf-body .btn-lg { padding: .7rem 1.35rem; font-size: 15px; border-radius: 12px; }
.sf-body .btn i, .sf-body .btn .fa { margin: 0; }

.sf-body .btn-primary { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; box-shadow: 0 1px 2px rgba(79, 70, 229, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.sf-body .btn-primary:hover, .sf-body .btn-primary:not(:disabled):not(.disabled):active { background: var(--sf-primary-hover); border-color: var(--sf-primary-hover); color: #fff; }
:root[data-theme="dark"] .sf-body .btn-primary { color: #0b0f1a; }
:root[data-theme="dark"] .sf-body .btn-primary:hover { color: #0b0f1a; }

.sf-body .btn-secondary, .sf-body .btn-default, .sf-body .btn-light {
    background: var(--sf-surface); border-color: var(--sf-border-strong); color: var(--sf-text); box-shadow: var(--sf-shadow-xs);
}
.sf-body .btn-secondary:hover, .sf-body .btn-default:hover, .sf-body .btn-light:hover,
.sf-body .btn-secondary:not(:disabled):not(.disabled):active { background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-text); }

.sf-body .btn-success { background: #059669; border-color: #059669; color: #fff; }
.sf-body .btn-success:hover { background: #047857; border-color: #047857; color: #fff; }
.sf-body .btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.sf-body .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.sf-body .btn-warning { background: #f59e0b; border-color: #f59e0b; color: #1f1300; }
.sf-body .btn-warning:hover { background: #d97706; border-color: #d97706; color: #1f1300; }
.sf-body .btn-info { background: #0284c7; border-color: #0284c7; color: #fff; }
.sf-body .btn-info:hover { background: #0369a1; border-color: #0369a1; color: #fff; }
.sf-body .btn-dark { background: #1e293b; border-color: #1e293b; color: #fff; }
:root[data-theme="dark"] .sf-body .btn-dark { background: #334155; border-color: #334155; }

.sf-body .btn-outline-primary { color: var(--sf-primary); border-color: var(--sf-primary); background: transparent; }
.sf-body .btn-outline-primary:hover { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); border-color: var(--sf-primary); }
.sf-body .btn-outline-secondary { color: var(--sf-text-2); border-color: var(--sf-border-strong); background: transparent; }
.sf-body .btn-outline-secondary:hover { background: var(--sf-surface-3); color: var(--sf-text); border-color: var(--sf-border-strong); }
.sf-body .btn-outline-success { color: var(--sf-success); border-color: var(--sf-success); }
.sf-body .btn-outline-success:hover { background: var(--sf-success-soft); color: var(--sf-success-text); }
.sf-body .btn-outline-danger { color: var(--sf-danger); border-color: var(--sf-danger); }
.sf-body .btn-outline-danger:hover { background: var(--sf-danger-soft); color: var(--sf-danger-text); }
.sf-body .btn-outline-warning { color: var(--sf-warning); border-color: var(--sf-warning); }
.sf-body .btn-outline-warning:hover { background: var(--sf-warning-soft); color: var(--sf-warning-text); }
.sf-body .btn-outline-info { color: var(--sf-info); border-color: var(--sf-info); }
.sf-body .btn-outline-info:hover { background: var(--sf-info-soft); color: var(--sf-info-text); }
.sf-body .btn-link { color: var(--sf-primary); font-weight: 600; }
.sf-body .btn.disabled, .sf-body .btn:disabled { opacity: .55; box-shadow: none; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.sf-body label, .sf-body .control-label, .sf-body .col-form-label {
    font-weight: 550; font-size: 13px; color: var(--sf-text-2); margin-bottom: 6px;
}
.sf-body .form-control, .sf-body .custom-select, .sf-body select.form-control {
    height: calc(2.6rem + 2px);
    border-radius: 10px;
    border: 1px solid var(--sf-border-strong);
    background-color: var(--sf-surface);
    color: var(--sf-text);
    font-size: 14px;
    padding: .5rem .8rem;
    box-shadow: var(--sf-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.sf-body textarea.form-control { height: auto; min-height: 96px; }
.sf-body .form-control[multiple], .sf-body select[multiple].form-control { height: auto; }
.sf-body .form-control-sm { height: calc(2rem + 2px); font-size: 13px; border-radius: 8px; }
.sf-body .form-control::placeholder { color: var(--sf-muted); opacity: 1; }
.sf-body .form-control:focus, .sf-body .custom-select:focus {
    border-color: var(--sf-primary); box-shadow: 0 0 0 3px var(--sf-primary-ring);
    background-color: var(--sf-surface); color: var(--sf-text); outline: none;
}
.sf-body .form-control:disabled, .sf-body .form-control[readonly] { background-color: var(--sf-surface-3); color: var(--sf-text-2); }
.sf-body .form-control.is-invalid, .sf-body .was-validated .form-control:invalid { border-color: var(--sf-danger); }
.sf-body .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
.sf-body .invalid-feedback { color: var(--sf-danger); font-size: 12.5px; }
.sf-body .form-text, .sf-body small.text-muted { color: var(--sf-muted) !important; }
.sf-body select.form-control, .sf-body .custom-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a94a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .8rem center; background-size: 12px 12px;
    padding-right: 2.2rem;
}
.sf-body select[multiple].form-control { background-image: none; padding-right: .8rem; }
.sf-body .input-group-text {
    background: var(--sf-surface-3); border-color: var(--sf-border-strong); color: var(--sf-text-2); border-radius: 10px;
}
.sf-body .input-group > .form-control:not(:last-child), .sf-body .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sf-body .input-group > .form-control:not(:first-child), .sf-body .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sf-body .input-group-prepend .input-group-text, .sf-body .input-group-prepend .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sf-body .input-group-append .input-group-text, .sf-body .input-group-append .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sf-body .custom-file-label { border-radius: 10px; border-color: var(--sf-border-strong); background: var(--sf-surface); color: var(--sf-text-2); height: calc(2.6rem + 2px); line-height: 1.9; }
.sf-body .custom-file-label::after { height: 100%; line-height: 1.9; background: var(--sf-surface-3); color: var(--sf-text); border-radius: 0 10px 10px 0; }
.sf-body .custom-file { height: calc(2.6rem + 2px); }
.sf-body input[type="file"].form-control { padding: .45rem .6rem; }
.sf-body .form-check-input, .sf-body input[type="checkbox"], .sf-body input[type="radio"] { accent-color: var(--sf-primary); }
.sf-body .form-check-label { color: var(--sf-text); font-weight: 450; }
.sf-body .form-group { margin-bottom: 1.15rem; }
.sf-body .custom-control-label::before { background-color: var(--sf-surface); border-color: var(--sf-border-strong); }
.sf-body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-body .custom-switch .custom-control-label::after { background-color: var(--sf-muted); }

/* --------------------------------------------------------------------------
   Tables + DataTables
   -------------------------------------------------------------------------- */
.sf-body .table { color: var(--sf-text); margin-bottom: 0; font-size: 13.5px; }
.sf-body .table th, .sf-body .table td { border-color: var(--sf-border); padding: .8rem .9rem; vertical-align: middle; }
.sf-body .table thead th {
    background: var(--sf-surface-2);
    color: var(--sf-text-2);
    font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--sf-border); border-top: 0;
    white-space: nowrap;
}
.sf-body .table-bordered { border: 1px solid var(--sf-border); border-radius: var(--sf-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.sf-body .table-bordered th, .sf-body .table-bordered td { border-width: 0 0 1px 0; border-color: var(--sf-border); }
.sf-body .table-bordered tbody tr:last-child td { border-bottom: 0; }
.sf-body .table-hover tbody tr { transition: background-color .12s ease; }
.sf-body .table-hover tbody tr:hover { background: var(--sf-primary-soft); color: var(--sf-text); }
.sf-body .table-striped tbody tr:nth-of-type(odd) { background: var(--sf-surface-2); }
.sf-body .thead-light th, .sf-body .table-light, .sf-body .table-light > th, .sf-body .table-light > td { background: var(--sf-surface-2); color: var(--sf-text-2); border-color: var(--sf-border); }
.sf-body .thead-dark th { background: #1e293b; color: #e2e8f0; border-color: #1e293b; }
.sf-body .table-active, .sf-body .table-active > td { background: var(--sf-surface-3); }
.sf-body .table-success, .sf-body .table-success > td { background: var(--sf-success-soft); }
.sf-body .table-danger, .sf-body .table-danger > td { background: var(--sf-danger-soft); }
.sf-body .table-warning, .sf-body .table-warning > td { background: var(--sf-warning-soft); }
.sf-body .table-info, .sf-body .table-info > td { background: var(--sf-info-soft); }
.sf-body .table-responsive { border-radius: var(--sf-radius); }
.sf-body .table td .btn-group, .sf-body .table td .btn { white-space: nowrap; }

.sf-body .dataTables_wrapper { color: var(--sf-text-2); font-size: 13px; }
.sf-body .dataTables_wrapper .dataTables_length select,
.sf-body .dataTables_wrapper .dataTables_filter input {
    height: 36px; border-radius: 9px; border: 1px solid var(--sf-border-strong);
    background: var(--sf-surface); color: var(--sf-text); padding: 0 .7rem; margin: 0 .35rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-body .dataTables_wrapper .dataTables_filter input { min-width: 220px; padding-left: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: .6rem center; background-size: 15px;
}
.sf-body .dataTables_wrapper .dataTables_filter input:focus,
.sf-body .dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px var(--sf-primary-ring); }
.sf-body .dataTables_wrapper .dataTables_info { color: var(--sf-muted); padding-top: 1rem; }
.sf-body .dataTables_wrapper .dataTables_paginate { padding-top: .75rem; }
.sf-body .dataTables_wrapper .row:first-child { margin-bottom: .75rem; }
.sf-body table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
.sf-body table.dataTable thead .sorting::before, .sf-body table.dataTable thead .sorting::after,
.sf-body table.dataTable thead .sorting_asc::before, .sf-body table.dataTable thead .sorting_asc::after,
.sf-body table.dataTable thead .sorting_desc::before, .sf-body table.dataTable thead .sorting_desc::after { opacity: .25; }
.sf-body table.dataTable thead .sorting_asc::before, .sf-body table.dataTable thead .sorting_desc::after { opacity: .9; color: var(--sf-primary); }
.sf-body table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
.sf-body table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before { background-color: var(--sf-primary); box-shadow: none; border: 0; top: 50%; margin-top: -8px; }

/* Pagination */
.sf-body .pagination { gap: 4px; }
.sf-body .page-link {
    border-radius: 8px !important; border: 1px solid var(--sf-border); margin: 0;
    color: var(--sf-text-2); background: var(--sf-surface); font-weight: 550; min-width: 36px; text-align: center;
    transition: background-color .15s ease, color .15s ease;
}
.sf-body .page-link:hover { background: var(--sf-surface-3); color: var(--sf-text); border-color: var(--sf-border); }
.sf-body .page-item.active .page-link { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; box-shadow: 0 4px 10px -4px var(--sf-primary); }
:root[data-theme="dark"] .sf-body .page-item.active .page-link { color: #0b0f1a; }
.sf-body .page-item.disabled .page-link { background: var(--sf-surface); color: var(--sf-muted); border-color: var(--sf-border); }

/* --------------------------------------------------------------------------
   Badges, alerts, misc components
   -------------------------------------------------------------------------- */
.sf-body .badge {
    font-weight: 600; font-size: 11.5px; letter-spacing: .01em;
    padding: .32em .7em; border-radius: 999px;
}
.sf-body .badge-primary { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); }
.sf-body .badge-secondary, .sf-body .badge-light, .sf-body .badge-default { background: var(--sf-neutral-soft); color: var(--sf-neutral-text); }
.sf-body .badge-success { background: var(--sf-success-soft); color: var(--sf-success-text); }
.sf-body .badge-danger { background: var(--sf-danger-soft); color: var(--sf-danger-text); }
.sf-body .badge-warning { background: var(--sf-warning-soft); color: var(--sf-warning-text); }
.sf-body .badge-info { background: var(--sf-info-soft); color: var(--sf-info-text); }
.sf-body .badge-dark { background: #1e293b; color: #f1f5f9; }
.sf-body .badge-pill { border-radius: 999px; }

.sf-body .alert {
    border-radius: var(--sf-radius); border: 1px solid transparent; padding: .85rem 1rem;
    font-size: 13.5px; position: relative;
    animation: sf-slide-down .35s var(--sf-ease) backwards;
}
.sf-body .alert-success { background: var(--sf-success-soft); color: var(--sf-success-text); border-color: color-mix(in srgb, var(--sf-success) 25%, transparent); }
.sf-body .alert-danger { background: var(--sf-danger-soft); color: var(--sf-danger-text); border-color: color-mix(in srgb, var(--sf-danger) 25%, transparent); }
.sf-body .alert-warning { background: var(--sf-warning-soft); color: var(--sf-warning-text); border-color: color-mix(in srgb, var(--sf-warning) 25%, transparent); }
.sf-body .alert-info { background: var(--sf-info-soft); color: var(--sf-info-text); border-color: color-mix(in srgb, var(--sf-info) 25%, transparent); }
.sf-body .alert-primary { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); border-color: color-mix(in srgb, var(--sf-primary) 25%, transparent); }
.sf-body .alert-secondary, .sf-body .alert-light { background: var(--sf-surface-3); color: var(--sf-text-2); border-color: var(--sf-border); }
.sf-body .alert .close { color: inherit; opacity: .6; text-shadow: none; }
.sf-body .alert .close:hover { opacity: 1; }
.sf-body .alert-heading { color: inherit; }

.sf-body .dropdown-menu {
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 12px;
    box-shadow: var(--sf-shadow-lg); padding: 6px; font-size: 13.5px; color: var(--sf-text);
    min-width: 12rem;
}
.sf-body .dropdown-menu.show { animation: sf-fade .16s ease; } /* opacity only: Popper positions menus with transform */
.sf-body .dropdown-item {
    border-radius: 8px; padding: .5rem .75rem; color: var(--sf-text); display: flex; align-items: center; gap: .6rem;
    transition: background-color .12s ease;
}
.sf-body .dropdown-item i { width: 16px; text-align: center; color: var(--sf-muted); }
.sf-body .dropdown-item:hover, .sf-body .dropdown-item:focus { background: var(--sf-surface-3); color: var(--sf-text); }
.sf-body .dropdown-item.active, .sf-body .dropdown-item:active { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); }
.sf-body .dropdown-item.text-danger, .sf-body .dropdown-item.text-danger i { color: var(--sf-danger) !important; }
.sf-body .dropdown-divider { border-color: var(--sf-border); margin: 6px 0; }
.sf-body .dropdown-header { color: var(--sf-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }

.sf-body .modal-content {
    background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-lg); overflow: hidden;
}
.sf-body .modal-header, .sf-body .modal-footer { border-color: var(--sf-border); padding: 1rem 1.25rem; }
.sf-body .modal-footer { background: var(--sf-surface-2); }
.sf-body .modal-title { font-weight: 650; font-size: 16px; }
.sf-body .modal-backdrop.show { opacity: .55; backdrop-filter: blur(2px); }
.sf-body .modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform .25s var(--sf-ease); }
.sf-body .modal.show .modal-dialog { transform: none; }
.sf-body .close { color: var(--sf-text-2); text-shadow: none; }

.sf-body .nav-tabs { border-bottom: 1px solid var(--sf-border); gap: 4px; }
.sf-body .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
    color: var(--sf-text-2); font-weight: 550; padding: .65rem 1rem;
    transition: color .15s ease, border-color .15s ease;
}
.sf-body .nav-tabs .nav-link:hover { color: var(--sf-text); border-bottom-color: var(--sf-border-strong); }
.sf-body .nav-tabs .nav-link.active, .sf-body .nav-tabs .nav-item.show .nav-link {
    color: var(--sf-primary); background: transparent; border-bottom-color: var(--sf-primary);
}
.sf-body .nav-pills .nav-link { border-radius: 10px; color: var(--sf-text-2); font-weight: 550; }
.sf-body .nav-pills .nav-link.active { background: var(--sf-primary); color: #fff; }
.sf-body .tab-content { padding-top: 1rem; }

.sf-body .list-group-item { background: var(--sf-surface); border-color: var(--sf-border); color: var(--sf-text); }
.sf-body .list-group-item-action:hover { background: var(--sf-surface-3); }
.sf-body .list-group-item.active { background: var(--sf-primary); border-color: var(--sf-primary); }

.sf-body .progress { background: var(--sf-surface-3); border-radius: 999px; height: .6rem; }
.sf-body .progress-bar { background: var(--sf-primary); border-radius: 999px; }

.sf-body .popover, .sf-body .tooltip-inner { border-radius: 8px; font-family: var(--sf-font); }
.sf-body .tooltip-inner { background: #0f172a; font-size: 12px; padding: .35rem .6rem; }

.sf-body .jumbotron { background: var(--sf-surface-2); border-radius: var(--sf-radius-lg); }

/* Bootstrap utilities that hard-code light colours */
.sf-body .bg-white { background-color: var(--sf-surface) !important; }
.sf-body .bg-light { background-color: var(--sf-surface-2) !important; }
.sf-body .text-dark { color: var(--sf-text) !important; }
.sf-body .text-muted { color: var(--sf-muted) !important; }
.sf-body .text-secondary { color: var(--sf-text-2) !important; }
.sf-body .text-primary { color: var(--sf-primary) !important; }
.sf-body .text-success { color: var(--sf-success) !important; }
.sf-body .text-danger { color: var(--sf-danger) !important; }
.sf-body .text-warning { color: var(--sf-warning) !important; }
.sf-body .text-info { color: var(--sf-info) !important; }
.sf-body .border, .sf-body .border-top, .sf-body .border-bottom, .sf-body .border-left, .sf-body .border-right { border-color: var(--sf-border) !important; }
.sf-body .shadow-sm { box-shadow: var(--sf-shadow-sm) !important; }
.sf-body .shadow { box-shadow: var(--sf-shadow) !important; }
.sf-body .rounded { border-radius: var(--sf-radius) !important; }

/* Third-party widgets */
.sf-body .select2-container--default .select2-selection--single,
.sf-body .select2-container--default .select2-selection--multiple {
    min-height: calc(2.6rem + 2px); border-radius: 10px; border: 1px solid var(--sf-border-strong); background: var(--sf-surface);
}
.sf-body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.6rem; color: var(--sf-text); padding-left: .8rem; }
.sf-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.6rem; right: 6px; }
.sf-body .select2-container--default.select2-container--focus .select2-selection--multiple,
.sf-body .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sf-primary); box-shadow: 0 0 0 3px var(--sf-primary-ring); }
.select2-dropdown { background: var(--sf-surface); border-color: var(--sf-border) !important; border-radius: 10px !important; box-shadow: var(--sf-shadow-lg); overflow: hidden; color: var(--sf-text); }
.select2-container--default .select2-search--dropdown .select2-search__field { border-radius: 8px; border-color: var(--sf-border-strong); background: var(--sf-surface); color: var(--sf-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--sf-primary); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); }
.sf-body .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--sf-primary-soft); border-color: transparent; color: var(--sf-primary-soft-text); border-radius: 6px; }

.sf-body .note-editor.note-frame { border-color: var(--sf-border-strong); border-radius: 10px; overflow: hidden; }
.sf-body .note-editor .note-toolbar { background: var(--sf-surface-2); border-color: var(--sf-border); }
.sf-body .note-editor .note-editing-area .note-editable { background: var(--sf-surface); color: var(--sf-text); }
.sf-body .note-editor .note-statusbar { background: var(--sf-surface-2); }
:root[data-theme="dark"] .sf-body .note-btn { background: var(--sf-surface-3); color: var(--sf-text); border-color: var(--sf-border); }

.swal-modal { border-radius: 16px; font-family: var(--sf-font); background: var(--sf-surface); }
.swal-title { color: var(--sf-text); font-weight: 650; }
.swal-text { color: var(--sf-text-2); }
.swal-button { border-radius: 10px; font-weight: 600; background: var(--sf-primary); }
.swal-button--cancel { background: var(--sf-surface-3); color: var(--sf-text); }
.swal-icon--success::before, .swal-icon--success::after, .swal-icon--success__hide-corners { background: var(--sf-surface); }

.pace .pace-progress { background: linear-gradient(90deg, #6366f1, #8b5cf6) !important; height: 3px !important; }
.pace .pace-activity { display: none; }

.sf-body .fc-unthemed th, .sf-body .fc-unthemed td, .sf-body .fc-unthemed thead, .sf-body .fc-unthemed tbody, .sf-body .fc-unthemed .fc-divider, .sf-body .fc-unthemed .fc-row, .sf-body .fc-unthemed .fc-popover { border-color: var(--sf-border); }

/* --------------------------------------------------------------------------
   New building blocks (for new and rebuilt pages)
   -------------------------------------------------------------------------- */
.sf-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.sf-page-head h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.sf-page-head p { margin: 4px 0 0; color: var(--sf-muted); }
.sf-page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sf-stat {
    position: relative; overflow: hidden;
    background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg);
    padding: 18px 20px; height: 100%;
    box-shadow: var(--sf-shadow-xs);
    transition: transform .25s var(--sf-ease), box-shadow .25s var(--sf-ease);
}
.sf-stat:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }
.sf-stat__label { font-size: 12.5px; font-weight: 600; color: var(--sf-muted); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-stat__value { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: 8px; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.sf-stat__meta { font-size: 12.5px; color: var(--sf-text-2); margin-top: 4px; }
.sf-stat__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: var(--sf-primary-soft); color: var(--sf-primary); }
.sf-stat--success .sf-stat__icon { background: var(--sf-success-soft); color: var(--sf-success); }
.sf-stat--danger .sf-stat__icon { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-stat--warning .sf-stat__icon { background: var(--sf-warning-soft); color: var(--sf-warning); }
.sf-stat--info .sf-stat__icon { background: var(--sf-info-soft); color: var(--sf-info); }

.sf-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; padding: 1px 7px; border-radius: 999px; }
.sf-trend--up { color: var(--sf-success-text); background: var(--sf-success-soft); }
.sf-trend--down { color: var(--sf-danger-text); background: var(--sf-danger-soft); }

.sf-empty { text-align: center; padding: 48px 16px; color: var(--sf-muted); }
.sf-empty i { font-size: 34px; margin-bottom: 12px; opacity: .55; display: block; }

.sf-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px 16px; margin: 0; }
.sf-dl dt { color: var(--sf-muted); font-weight: 500; font-size: 13px; }
.sf-dl dd { margin: 0; color: var(--sf-text); font-weight: 500; word-break: break-word; }

.sf-skeleton { background: linear-gradient(90deg, var(--sf-surface-3) 25%, var(--sf-surface-2) 50%, var(--sf-surface-3) 75%); background-size: 200% 100%; animation: sf-shimmer 1.4s infinite; border-radius: 8px; }

.sf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sf-neutral-soft); color: var(--sf-neutral-text); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes sf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sf-slide-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Page entrance: only opacity on the wrapper (a transform would re-anchor fixed
   children such as modals); cards rise individually and settle with no transform. */
.sf-main { animation: sf-fade .3s ease; }
.sf-main .app-title, .sf-main .sf-page-head { animation: sf-rise .4s var(--sf-ease) backwards; }
.sf-main .tile, .sf-main .widget-small, .sf-main .sf-stat, .sf-main > .row > [class*="col"] > .card { animation: sf-rise .45s var(--sf-ease) backwards; }
.sf-main .row > [class*="col"]:nth-child(2) > .tile, .sf-main .row > [class*="col"]:nth-child(2) > .widget-small, .sf-main .row > [class*="col"]:nth-child(2) > .sf-stat { animation-delay: .04s; }
.sf-main .row > [class*="col"]:nth-child(3) > .tile, .sf-main .row > [class*="col"]:nth-child(3) > .widget-small, .sf-main .row > [class*="col"]:nth-child(3) > .sf-stat { animation-delay: .08s; }
.sf-main .row > [class*="col"]:nth-child(4) > .tile, .sf-main .row > [class*="col"]:nth-child(4) > .widget-small, .sf-main .row > [class*="col"]:nth-child(4) > .sf-stat { animation-delay: .12s; }

.sf-theme-switching, .sf-theme-switching * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Sign-in pages
   ========================================================================== */
.sf-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--sf-bg); }
@media (max-width: 991.98px) { .sf-auth { grid-template-columns: 1fr; } .sf-auth__aside { display: none !important; } }

.sf-auth__aside {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(1200px 600px at -10% -10%, #6366f1 0%, transparent 60%),
                radial-gradient(900px 600px at 110% 110%, #a855f7 0%, transparent 55%),
                #0f1629;
    display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px;
}
.sf-auth__aside::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.sf-auth__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: sf-float 14s ease-in-out infinite; }
.sf-auth__blob--1 { width: 340px; height: 340px; background: #818cf8; top: 18%; left: 55%; }
.sf-auth__blob--2 { width: 260px; height: 260px; background: #c084fc; bottom: 12%; left: 8%; animation-delay: -6s; }
@keyframes sf-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -24px) scale(1.06); } 66% { transform: translate(-22px, 18px) scale(.96); } }

.sf-auth__aside > *:not(.sf-auth__blob) { position: relative; z-index: 1; }
.sf-auth__brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; }
.sf-auth__brand .sf-sidebar__logo { width: 42px; height: 42px; font-size: 18px; }
.sf-auth__pitch h2 { color: #fff; font-size: 38px; line-height: 1.15; font-weight: 750; letter-spacing: -.03em; margin: 0 0 16px; max-width: 520px; }
.sf-auth__pitch p { color: rgba(226, 232, 255, .78); font-size: 16px; max-width: 460px; margin: 0 0 28px; }
.sf-auth__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sf-auth__features li { display: flex; align-items: center; gap: 12px; color: rgba(236, 240, 255, .9); font-size: 14.5px; animation: sf-rise .6s var(--sf-ease) backwards; }
.sf-auth__features li:nth-child(2) { animation-delay: .08s; }
.sf-auth__features li:nth-child(3) { animation-delay: .16s; }
.sf-auth__features i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.sf-auth__copy { font-size: 12.5px; color: rgba(226, 232, 255, .55); }

.sf-auth__main { display: flex; flex-direction: column; padding: 28px; }
.sf-auth__top { display: flex; justify-content: flex-end; }
.sf-auth__center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.sf-auth__card { width: 100%; max-width: 420px; animation: sf-rise .5s var(--sf-ease); }
.sf-auth__mobile-brand { display: none; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; margin-bottom: 28px; color: var(--sf-text); }
@media (max-width: 991.98px) { .sf-auth__mobile-brand { display: flex; } }
.sf-auth__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sf-primary); background: var(--sf-primary-soft); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.sf-auth__card h1 { font-size: 28px; font-weight: 750; letter-spacing: -.03em; margin: 0 0 6px; }
.sf-auth__card .sf-auth__lead { color: var(--sf-text-2); margin: 0 0 28px; font-size: 14.5px; }
.sf-auth .form-control { height: 46px; font-size: 15px; }
.sf-auth .btn-primary { height: 46px; font-size: 15px; }
.sf-field { position: relative; }
.sf-field > i.sf-field__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sf-muted); pointer-events: none; transition: color .15s ease; }
.sf-field .form-control { padding-left: 40px; }
.sf-field .form-control:focus ~ i.sf-field__icon, .sf-field:focus-within > i.sf-field__icon { color: var(--sf-primary); }
.sf-field__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--sf-muted); border-radius: 8px; cursor: pointer; }
.sf-field__toggle:hover { color: var(--sf-text); background: var(--sf-surface-3); }
.sf-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 20px; font-size: 13.5px; }
.sf-auth__row label { margin: 0; font-weight: 500; color: var(--sf-text-2); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sf-auth__foot { text-align: center; margin-top: 24px; font-size: 13.5px; color: var(--sf-text-2); }
.sf-recaptcha { margin-bottom: 18px; min-height: 78px; }

.sf-otp { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 20px; }
.sf-otp input {
    width: 100%; max-width: 56px; height: 60px; text-align: center; padding: 0;
    font-size: 24px; font-weight: 700; font-family: var(--sf-mono);
    border-radius: 12px; border: 1px solid var(--sf-border-strong);
    background: var(--sf-surface); color: var(--sf-text);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sf-otp input:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px var(--sf-primary-ring); transform: translateY(-1px); }
.sf-otp input.is-filled { border-color: var(--sf-primary); background: var(--sf-primary-soft); }
.sf-otp.is-error input { border-color: var(--sf-danger); animation: sf-shake .4s; }
@keyframes sf-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.sf-btn-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: sf-spin .7s linear infinite; }
.is-loading .sf-btn-spinner { display: inline-block; }
.is-loading .sf-btn-label-idle { display: none; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Searchable selects (Tom Select, public/backend/js/forms.js)
   ========================================================================== */
.sf-body .ts-wrapper.form-control, .sf-body .ts-wrapper.custom-select { padding: 0; height: auto; border: 0; box-shadow: none; background: none; }
.sf-body .ts-wrapper .ts-control {
    min-height: calc(2.6rem + 2px); border-radius: 10px; border: 1px solid var(--sf-border-strong);
    background: var(--sf-surface); color: var(--sf-text); padding: .45rem 2.2rem .45rem .8rem; font-size: 14px;
    box-shadow: var(--sf-shadow-xs); transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-body .ts-wrapper.single .ts-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a94a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 12px; }
.sf-body .ts-wrapper.single .ts-control::after { display: none; }
.sf-body .ts-wrapper .ts-control input { color: var(--sf-text); font-size: 14px; }
.sf-body .ts-wrapper .ts-control input::placeholder { color: var(--sf-muted); }
.sf-body .ts-wrapper.focus .ts-control { border-color: var(--sf-primary); box-shadow: 0 0 0 3px var(--sf-primary-ring); }
.sf-body .ts-wrapper.disabled .ts-control { background-color: var(--sf-surface-3); opacity: .75; }
.sf-body .ts-wrapper.is-invalid .ts-control, .sf-body select.is-invalid + .ts-wrapper .ts-control { border-color: var(--sf-danger); }
.sf-body .ts-wrapper.multi .ts-control > .item { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); border: 0; border-radius: 6px; padding: 2px 8px; }
.sf-body .ts-wrapper.multi .ts-control > .item .remove { border-left-color: transparent; color: inherit; }
.ts-dropdown {
    background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-border); border-radius: 12px;
    box-shadow: var(--sf-shadow-lg); margin-top: 6px; overflow: hidden; z-index: 1060; animation: sf-fade .14s ease;
}
.ts-dropdown .ts-dropdown-content { max-height: 280px; padding: 4px; }
.ts-dropdown .option { border-radius: 8px; padding: .5rem .7rem; color: var(--sf-text); }
.ts-dropdown .active { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); }
.ts-dropdown .option.selected { font-weight: 600; }
.ts-dropdown .no-results { padding: .6rem .8rem; color: var(--sf-muted); }
.ts-dropdown .dropdown-input-wrap { padding: 6px; }
.sf-ts.sf-loading .ts-control, select.sf-loading { background-image: none !important; }
.sf-ts.sf-loading .ts-control::before {
    content: ''; position: absolute; right: .8rem; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    border: 2px solid var(--sf-border-strong); border-top-color: var(--sf-primary); border-radius: 50%; animation: sf-spin .7s linear infinite;
}

/* ==========================================================================
   Dashboards
   Chart series colours: validated reference palette (blue, orange), with
   their own dark-mode steps.
   ========================================================================== */
:root { --sf-viz-1: #2a78d6; --sf-viz-1-fill: rgba(42, 120, 214, .10); --sf-viz-2: #eb6834; }
:root[data-theme="dark"] { --sf-viz-1: #3987e5; --sf-viz-1-fill: rgba(57, 135, 229, .16); --sf-viz-2: #d95926; }

.sf-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-period__chips { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sf-surface); border: 1px solid var(--sf-border); }
.sf-period__chip {
    border: 0; background: transparent; color: var(--sf-text-2); font-weight: 600; font-size: 12.5px;
    padding: 6px 11px; border-radius: 9px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.sf-period__chip:hover { color: var(--sf-text); background: var(--sf-surface-3); }
.sf-period__chip.is-active { background: var(--sf-primary); color: #fff; box-shadow: 0 2px 6px -2px var(--sf-primary); }
:root[data-theme="dark"] .sf-period__chip.is-active { color: #0b0f1a; }
.sf-period__custom { display: inline-flex; align-items: center; gap: 6px; }
.sf-period__custom .form-control { width: 150px; }

.sf-attention {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 10px;
    color: var(--sf-text) !important; transition: background-color .15s ease;
}
.sf-attention + .sf-attention { margin-top: 2px; }
.sf-attention:hover { background: var(--sf-surface-3); }
.sf-attention__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--sf-primary-soft); color: var(--sf-primary); }
.sf-attention--danger .sf-attention__icon { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-attention--warning .sf-attention__icon { background: var(--sf-warning-soft); color: var(--sf-warning); }
.sf-attention--info .sf-attention__icon { background: var(--sf-info-soft); color: var(--sf-info); }
.sf-attention__label { flex: 1; font-weight: 500; }
.sf-attention__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-attention__go { font-size: 11px; color: var(--sf-muted); transition: transform .15s ease; }
.sf-attention:hover .sf-attention__go { transform: translateX(3px); }

.sf-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--sf-text-2); }
.sf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sf-legend__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

.sf-bars { display: grid; gap: 12px; min-width: 0; }
.sf-bars > * { min-width: 0; }
.sf-nowrap { white-space: nowrap; }
.sf-bar__head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.sf-bar__head span:first-child { color: var(--sf-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sf-bar__head span:last-child { color: var(--sf-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-bar__track { height: 8px; border-radius: 999px; background: var(--sf-surface-3); overflow: hidden; }
.sf-bar__fill { height: 100%; border-radius: 999px; background: var(--sf-viz-1); transform-origin: left; animation: sf-grow .7s var(--sf-ease) backwards; }
@keyframes sf-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sf-money-list { list-style: none; margin: 0; padding: 0; }
.sf-money-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--sf-border); font-size: 13.5px; }
.sf-money-list li:last-child { border-bottom: 0; }
.sf-money-list li span:first-child { color: var(--sf-text-2); display: inline-flex; align-items: center; gap: 8px; }
.sf-money-list li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-money-list li.is-total { border-top: 1px solid var(--sf-border-strong); border-bottom: 0; margin-top: 4px; padding-top: 12px; }
.sf-money-list li.is-total span { color: var(--sf-text); font-weight: 700; }
.sf-money-list .is-minus { color: var(--sf-danger); }

.sf-hero { position: relative; overflow: hidden; border-radius: var(--sf-radius-lg); padding: 22px 24px; color: #fff; margin-bottom: 24px;
    background: radial-gradient(600px 240px at 100% 0%, rgba(167, 139, 250, .55), transparent 60%), linear-gradient(135deg, #4338ca, #6d28d9);
    box-shadow: 0 18px 40px -18px rgba(79, 70, 229, .7); animation: sf-rise .45s var(--sf-ease) backwards; }
.sf-hero h2 { color: #fff; font-size: 20px; margin: 0 0 4px; }
.sf-hero p { color: rgba(255, 255, 255, .78); margin: 0; }
.sf-hero__figure { font-size: 30px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sf-hero__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .7); font-weight: 600; }
.sf-hero .btn-light { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }
.sf-hero .btn-light:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.sf-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--sf-neutral-soft); color: var(--sf-neutral-text); white-space: nowrap; }
.sf-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sf-status--good { background: var(--sf-success-soft); color: var(--sf-success-text); }
.sf-status--warn { background: var(--sf-warning-soft); color: var(--sf-warning-text); }
.sf-status--bad { background: var(--sf-danger-soft); color: var(--sf-danger-text); }
.sf-status--info { background: var(--sf-info-soft); color: var(--sf-info-text); }

/* Choice cards (radio buttons with a description) */
.sf-choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sf-choice { position: relative; margin: 0; cursor: pointer; }
.sf-choice input { position: absolute; opacity: 0; }
.sf-choice__body {
    display: flex; gap: 12px; align-items: flex-start; height: 100%;
    padding: 14px; border-radius: 12px; border: 1px solid var(--sf-border-strong); background: var(--sf-surface);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sf-choice__body > i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--sf-surface-3); color: var(--sf-text-2); }
.sf-choice__body strong { display: block; color: var(--sf-text); font-weight: 600; font-size: 14px; }
.sf-choice__body small { display: block; color: var(--sf-muted); font-weight: 400; margin-top: 2px; line-height: 1.4; }
.sf-choice:hover .sf-choice__body { border-color: var(--sf-primary); }
.sf-choice input:checked + .sf-choice__body { border-color: var(--sf-primary); background: var(--sf-primary-soft); box-shadow: 0 0 0 3px var(--sf-primary-ring); }
.sf-choice input:checked + .sf-choice__body > i { background: var(--sf-primary); color: #fff; }
.sf-choice input:focus-visible + .sf-choice__body { box-shadow: 0 0 0 3px var(--sf-primary-ring); }

/* ==========================================================================
   Till (Sell): partnermain/sell/pos.blade.php + public/backend/js/pos.js
   ========================================================================== */
.sf-pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
@media (max-width: 1199.98px) { .sf-pos { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 991.98px) { .sf-pos { grid-template-columns: 1fr; } }
.sf-pos__search { position: relative; margin-bottom: 12px; }
.sf-pos__search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--sf-muted); }
.sf-pos__search input {
    width: 100%; height: 52px; padding: 0 50px 0 46px; font-size: 16px; border-radius: 14px;
    border: 1px solid var(--sf-border-strong); background: var(--sf-surface); color: var(--sf-text); box-shadow: var(--sf-shadow-xs);
}
.sf-pos__search input:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px var(--sf-primary-ring); }
.sf-pos__search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: var(--sf-surface-3); color: var(--sf-muted); border-radius: 6px; padding: 2px 8px; font-size: 12px; }
.sf-pos__cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: thin; }
.sf-pos__cats button { white-space: nowrap; border: 1px solid var(--sf-border); background: var(--sf-surface); color: var(--sf-text-2); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s ease; }
.sf-pos__cats button:hover { border-color: var(--sf-primary); color: var(--sf-text); }
.sf-pos__cats button.is-active { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }
:root[data-theme="dark"] .sf-pos__cats button.is-active { color: #0b0f1a; }
.sf-pos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; transition: opacity .2s ease; }
.sf-pos__grid.is-loading { opacity: .55; }
.sf-pos__product {
    display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 4px; padding: 10px; cursor: pointer;
    border: 1px solid var(--sf-border); border-radius: 14px; background: var(--sf-surface); color: var(--sf-text);
    transition: transform .15s var(--sf-ease), box-shadow .15s ease, border-color .15s ease;
}
.sf-pos__product:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); border-color: var(--sf-primary); }
.sf-pos__product:active, .sf-pos__product.is-added { transform: scale(.97); border-color: var(--sf-success); }
.sf-pos__product.is-out { opacity: .6; }
.sf-pos__product img, .sf-pos__noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--sf-surface-3); }
.sf-pos__noimg { display: grid; place-items: center; color: var(--sf-muted); font-size: 24px; }
.sf-pos__pname { font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.sf-pos__pmeta { font-size: 11.5px; color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-pos__pprice { font-weight: 700; color: var(--sf-primary); font-variant-numeric: tabular-nums; }
.sf-pos__pprice s { color: var(--sf-muted); font-weight: 400; font-size: 12px; }
.sf-pos__stock { font-size: 11.5px; color: var(--sf-success-text); }
.sf-pos__stock.is-low { color: var(--sf-warning-text); }
.sf-pos__stock.is-out { color: var(--sf-danger-text); }

.sf-pos__cart {
    position: sticky; top: calc(var(--sf-topbar-h) + 16px); display: flex; flex-direction: column;
    max-height: calc(100vh - var(--sf-topbar-h) - 32px); background: var(--sf-surface); border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow); overflow: hidden;
}
@media (max-width: 991.98px) { .sf-pos__cart { position: static; max-height: none; } }
.sf-pos__cart-head { display: flex; gap: 8px; align-items: center; padding: 14px; border-bottom: 1px solid var(--sf-border); }
.sf-pos__cart-head select { width: auto; }
.sf-pos__seg { display: inline-flex; background: var(--sf-surface-3); border-radius: 10px; padding: 3px; flex: 1; }
.sf-pos__seg button { flex: 1; border: 0; background: transparent; color: var(--sf-text-2); font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.sf-pos__seg button.is-active { background: var(--sf-surface); color: var(--sf-text); box-shadow: var(--sf-shadow-xs); }
.sf-pos__customer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--sf-border); }
#pos-customer-business { grid-template-columns: 1fr; }
.sf-pos__lines { flex: 1; overflow-y: auto; padding: 6px 14px; min-height: 160px; }
.sf-pos__line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--sf-border); animation: sf-slide-down .2s var(--sf-ease); }
.sf-pos__line-name { display: block; font-weight: 600; font-size: 13.5px; }
.sf-pos__line-price { display: block; font-size: 12px; color: var(--sf-muted); }
.sf-pos__outright { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sf-text-2); margin: 4px 0 0; font-weight: 500; }
.sf-pos__qty { display: inline-flex; align-items: center; border: 1px solid var(--sf-border-strong); border-radius: 10px; overflow: hidden; }
.sf-pos__qty button { width: 30px; height: 32px; border: 0; background: var(--sf-surface-3); color: var(--sf-text); font-size: 16px; cursor: pointer; }
.sf-pos__qty input { width: 46px; height: 32px; border: 0; text-align: center; background: var(--sf-surface); color: var(--sf-text); font-weight: 600; -moz-appearance: textfield; }
.sf-pos__qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sf-pos__line-total { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
.sf-pos__remove { border: 0; background: transparent; color: var(--sf-muted); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.sf-pos__remove:hover { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-pos__totals { padding: 14px; border-top: 1px solid var(--sf-border); background: var(--sf-surface-2); }
.sf-pos__totals dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.sf-pos__totals dt { font-weight: 500; color: var(--sf-text-2); }
.sf-pos__totals dd { margin: 0; text-align: right; }
.sf-pos__totals .is-total { font-size: 20px; font-weight: 750; color: var(--sf-text); padding-top: 6px; border-top: 1px solid var(--sf-border); }
.sf-pos__problems { background: var(--sf-warning-soft); color: var(--sf-warning-text); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 10px; }
.sf-pos__methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sf-pos__methods .sf-choice__body { align-items: center; padding: 12px; }
.sf-pos__change { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--sf-success-soft); color: var(--sf-success-text); font-weight: 600; }
.sf-pos__change:empty { display: none; }
.sf-pos__change strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.sf-pos__change.is-big { max-width: 360px; margin: 16px auto 0; }
.sf-pos__change.is-big strong { font-size: 26px; }
.sf-pos__result { padding: 16px 0; }
.sf-pos__icon, .sf-pos__pulse { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--sf-success-soft); color: var(--sf-success); animation: sf-pop .35s var(--sf-ease); }
.sf-pos__icon.is-bad { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-pos__pulse { background: var(--sf-primary-soft); color: var(--sf-primary); animation: sf-pulse 1.4s ease-in-out infinite; }
@keyframes sf-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--sf-primary-ring); } 50% { box-shadow: 0 0 0 18px transparent; } }
.sf-body .sf-pos__cart-head select.form-control { height: 36px; padding-top: 0; padding-bottom: 0; line-height: 34px; }

/* Business profile header (shared/partners/view.blade.php) */
.sf-partner-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; animation: sf-rise .4s var(--sf-ease) backwards; }
.sf-partner-hero__logo { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: grid; place-items: center; box-shadow: var(--sf-shadow); }
.sf-partner-hero__logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.sf-partner-hero__logo span { color: #fff; font-weight: 750; font-size: 24px; letter-spacing: .02em; }
.sf-partner-hero__main { flex: 1; min-width: 240px; }
.sf-partner-hero__main h1 { font-size: 24px; font-weight: 750; margin: 0; letter-spacing: -.02em; }
.sf-partner-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Media cards (events, galleries) */
.sf-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sf-media-card { display: flex; flex-direction: column; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); overflow: hidden; color: var(--sf-text) !important; box-shadow: var(--sf-shadow-xs); transition: transform .2s var(--sf-ease), box-shadow .2s var(--sf-ease); animation: sf-rise .4s var(--sf-ease) backwards; }
a.sf-media-card:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow); }
.sf-media-card__img { position: relative; aspect-ratio: 16 / 10; background: var(--sf-surface-3); display: grid; place-items: center; color: var(--sf-muted); font-size: 32px; overflow: hidden; }
.sf-media-card__img img, .sf-media-card__img iframe { width: 100%; height: 100%; object-fit: cover; border: 0; transition: transform .4s var(--sf-ease); }
a.sf-media-card:hover .sf-media-card__img img { transform: scale(1.04); }
.sf-media-card__img > a { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; }
.sf-media-card__body { padding: 12px 14px 14px; }
.sf-media-card__body h3 { font-size: 15px; font-weight: 650; margin: 8px 0 4px; }
.sf-media-card__body p { font-size: 12.5px; color: var(--sf-text-2); margin: 2px 0 0; }
.sf-date-badge { position: absolute; top: 10px; left: 10px; background: var(--sf-surface); color: var(--sf-text); border-radius: 10px; padding: 4px 10px; font-size: 11px; text-transform: uppercase; font-weight: 700; text-align: center; line-height: 1.1; box-shadow: var(--sf-shadow-sm); }
.sf-date-badge b { display: block; font-size: 18px; }
.sf-count-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(15, 23, 42, .7); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }

/* FullCalendar (shared/calendar/index.blade.php) */
.sf-calendar .fc {
    --fc-border-color: var(--sf-border); --fc-page-bg-color: var(--sf-surface); --fc-neutral-bg-color: var(--sf-surface-2);
    --fc-list-event-hover-bg-color: var(--sf-surface-3); --fc-today-bg-color: var(--sf-primary-soft);
    --fc-button-text-color: var(--sf-text); --fc-button-bg-color: var(--sf-surface); --fc-button-border-color: var(--sf-border-strong);
    --fc-button-hover-bg-color: var(--sf-surface-3); --fc-button-hover-border-color: var(--sf-border-strong);
    --fc-button-active-bg-color: var(--sf-primary); --fc-button-active-border-color: var(--sf-primary);
    --fc-event-border-color: transparent; --fc-now-indicator-color: var(--sf-danger);
    font-size: 13px;
}
.sf-calendar .fc .fc-toolbar-title { font-size: 18px; font-weight: 700; color: var(--sf-text); }
.sf-calendar .fc .fc-button { border-radius: 9px; font-weight: 600; text-transform: capitalize; box-shadow: none !important; padding: .35rem .75rem; }
.sf-calendar .fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.sf-calendar .fc .fc-col-header-cell-cushion, .sf-calendar .fc .fc-daygrid-day-number, .sf-calendar .fc .fc-list-day-text, .sf-calendar .fc .fc-list-day-side-text { color: var(--sf-text-2); }
.sf-calendar .fc .fc-daygrid-event { border-radius: 6px; padding: 1px 4px; }
.sf-calendar .fc .fc-event { cursor: pointer; }
.sf-calendar .fc .fc-list-event-title a { color: var(--sf-text); }

/* --------------------------------------------------------------------------
   Payroll
   -------------------------------------------------------------------------- */
.sf-payslip-table td, .sf-payslip-table th { border-color: var(--sf-border); }
.sf-payslip-net td { font-size: 16px; font-weight: 700; color: var(--sf-primary); border-top: 2px solid var(--sf-primary) !important; }
.sf-lines__row .btn-link { line-height: 1; padding-top: 10px; }
.sf-payslip-section th { background: var(--sf-primary-soft); color: var(--sf-primary-soft-text); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }