/* =============================================
               SOULCONNECT ADMIN PANEL — DESIGN SYSTEM v2
               Premium SaaS Admin Experience
               ============================================= */

        /* === CUSTOM PROPERTIES === */
        :root {
            /* FullCalendar overrides */
            --fc-event-text-color: #101010;
            --fc-bg-event-opacity: 1;
            --fc-bg-event-color: rgb(225, 240, 255);
            --fc-bg-event-border: 1px dashed #87c0e1;

            /* SoulConnect Design Tokens */
            --sc-radius-sm: 6px;
            --sc-radius-md: 8px;
            --sc-radius-lg: 12px;
            --sc-radius-xl: 16px;
            --sc-radius-full: 9999px;

            --sc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
            --sc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
            --sc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
            --sc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
            --sc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

            --sc-color-page-bg: #F8F9FC;
            --sc-color-surface: #FFFFFF;
            --sc-color-surface-subtle: #F4F5F9;
            --sc-color-border: #E4E7EC;
            --sc-color-border-subtle: #ECEEF2;

            --sc-color-text: #1A1D26;
            --sc-color-text-secondary: #5F6B7A;
            --sc-color-text-tertiary: #8B95A5;

            --sc-color-accent: #6C63FF;
            --sc-color-accent-soft: #F0EEFF;
            /* Kolor tekstu NA akcencie. Bez tego tokenu każdy przycisk główny
               zaszywałby sobie `#fff` — a to dokładnie ta klasa błędu, którą
               pilnują testy podatków i kondycji SMS. */
            --sc-color-on-accent: #FFFFFF;
            --sc-color-success: #10B981;
            --sc-color-success-soft: #ECFDF5;
            --sc-color-warning: #F59E0B;
            --sc-color-warning-soft: #FFFBEB;
            --sc-color-error: #EF4444;
            --sc-color-error-soft: #FEF2F2;
            --sc-color-info: #3B82F6;
            --sc-color-info-soft: #EFF6FF;

            --sc-transition-fast: 0.15s ease;
            --sc-transition-base: 0.2s ease;
            --sc-transition-slow: 0.3s ease;

            /* Szerokość sidebara — używana przy position:fixed + margin .sc-main */
            --sc-sidebar-width: 240px;
        }


        .admin-message-card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: box-shadow 0.2s ease;
        }

        .admin-message-card:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .admin-message-card.new {
            border-left: 4px solid #0073aa;
            background: #f0f8ff;
        }

        .message-card-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .message-card-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin: 0 0 8px 0;
        }

        .message-card-meta {
            font-size: 13px;
            color: #666;
        }

        .message-card-status {
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .message-card-status.new {
            background: #0073aa;
            color: white;
        }

        .message-card-status.answered {
            background: #46b450;
            color: white;
        }

        .message-card-content {
            line-height: 1.6;
            color: #444;
            margin-bottom: 15px;
        }

        .message-card-reply-section {
            background: #e8f5e9;
            border-left: 3px solid #46b450;
            padding: 15px;
            margin-top: 15px;
            border-radius: 4px;
        }

        .message-card-actions {
            margin-top: 15px;
            text-align: right;
        }


        /* === GLOBAL RESET & BASE === */
        html,
        body {
            overflow-x: hidden;
            color: var(--sc-color-text);
            background-color: var(--sc-color-page-bg) !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .SoulConnect,
        .select2-results__option,
        .login-form-container {
            font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
        }

        /* ======================
               LAYOUT — SIDEBAR + MAIN
               ====================== */
        .sc-layout {
            display: flex;
            min-height: 100vh;
            padding: 0 !important;
        }

        /* --- SIDEBAR --- */
        .sc-sidebar {
            width: var(--sc-sidebar-width, 240px);
            /* Tło ustawiane osobno w Ustawieniach (--sc-sidebar-bg); bez niego
               zachowanie jak dotąd, czyli najciemniejszy kolor motywu. */
            background: var(--sc-sidebar-bg, var(--sc-darkest-color, #2B2B3F));
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            height: 100vh;
            max-height: 100dvh;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 200;
            transition: width 0.25s ease, transform 0.25s ease, margin 0.25s ease;
        }

        /*
             * Sticky na sidebarze psuje się przy overflow-x na html/body (motyw WP).
             * Desktop + tablet: fixed + margin na .sc-main — zachowanie jak „przyklejony” pasek.
             */
        @media (min-width: 769px) {
            .sc-layout {
                display: block;
            }

            .sc-sidebar {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                width: var(--sc-sidebar-width, 240px);
            }

            .sc-main {
                margin-left: var(--sc-sidebar-width, 240px);
                min-height: 100vh;
                min-height: 100dvh;
            }

            /* Zamknięcie menu mobilnego NIE ISTNIEJE na desktopie — brak tu menu do zamknięcia.
               !important świadomie i wąsko: to jedyny sposób, żeby cudzy CSS motywu (którego
               nie kontrolujemy) nie mógł tego przycisku wywołać na ekran. Zgłoszenie salonu:
               „sc-mobile-sidebar-close widać na desktop”. */
            .sc-sidebar .sc-mobile-sidebar-close,
            .sc-mobile-sidebar-close {
                display: none !important;
            }
        }

        .sc-sidebar-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 20px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            flex-shrink: 0;
        }

        .sc-logo-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--sc-radius-md);
            background: var(--sc-color-accent);
            color: white;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            letter-spacing: -0.03em;
        }

        .sc-logo-text {
            display: flex;
            flex-direction: column;
            gap: 1px;
            overflow: hidden;
        }

        .sc-logo-name {
            font-size: 14px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.95);
            white-space: nowrap;
            letter-spacing: -0.01em;
        }

        .sc-logo-sub {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.45);
            white-space: nowrap;
        }

        /* --- SIDEBAR NAVIGATION --- */
        .sc-sidebar .soulconnect-nav {
            display: flex;
            flex-direction: column;
            padding: 12px 8px;
            gap: 2px;
            flex: 1;
            border-bottom: none;
            margin-bottom: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .sc-nav-group {
            margin-bottom: 8px;
        }

        .sc-nav-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(255, 255, 255, 0.3);
            padding: 8px 10px 4px;
            white-space: nowrap;
            overflow: hidden;
        }

        .sc-sidebar .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 10px;
            border-radius: var(--sc-radius-md);
            color: rgba(255, 255, 255, 0.6);
            font-size: 13px;
            font-weight: 500;
            text-decoration: none !important;
            transition: background var(--sc-transition-fast), color var(--sc-transition-fast);
            border: 1px solid transparent;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .sc-sidebar .nav-item:hover {
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.9);
            border-color: transparent;
            transform: none;
            box-shadow: none;
        }

        .sc-sidebar .nav-item.active {
            background: rgba(108, 99, 255, 0.2);
            color: white;
            border-color: rgba(108, 99, 255, 0.35);
            font-weight: 600;
            box-shadow: none;
        }

        .sc-sidebar .nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 3px;
            background: var(--sc-color-accent);
            border-radius: 0 2px 2px 0;
        }

        .sc-sidebar .nav-item.logout-btn {
            color: rgba(239, 68, 68, 0.7);
            background: transparent;
            border-color: transparent;
            margin-left: 0;
        }

        .sc-sidebar .nav-item.logout-btn:hover {
            background: rgba(239, 68, 68, 0.1);
            color: #EF4444;
            border-color: transparent;
        }

        .sc-nav-locked {
            opacity: 0.45;
            cursor: not-allowed !important;
            pointer-events: none;
        }

        .sc-nav-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            opacity: 0.85;
        }

        /* Prompt modal — focus state dla inputa */
        #sc-prompt-modal .sc-prompt-input:focus {
            border-color: var(--sc-color-accent);
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
        }

        /* Badge liczby nieprzeczytanych wiadomości na elemencie nav */
        .sc-nav-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #EF4444;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            padding: 2px 5px;
            border-radius: 9999px;
            margin-left: 4px;
            vertical-align: middle;
        }

        .sc-sidebar-footer {
            padding: 8px 8px 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            flex-shrink: 0;
        }

        /* --- MAIN AREA --- */
        .sc-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            background: var(--sc-color-page-bg);
        }

        .sc-topbar {
            height: 56px;
            border-bottom: 1px solid var(--sc-color-border);
            display: flex;
            align-items: center;
            padding: 0 24px;
            background: var(--sc-color-surface);
            flex-shrink: 0;
            gap: 12px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--sc-shadow-xs);
        }

        .sc-page-title {
            margin: 0 !important;
            font-size: 17px !important;
            font-weight: 600 !important;
            letter-spacing: -0.02em;
            color: var(--sc-color-text) !important;
        }

        .sc-topbar-spacer {
            flex: 1;
        }

        .sc-content {
            flex: 1;
            padding: 24px;
            overflow-y: auto;
        }

        .sc-mobile-menu-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: 1px solid var(--sc-color-border);
            background: var(--sc-color-surface);
            cursor: pointer;
            color: var(--sc-color-text-secondary);
            border-radius: var(--sc-radius-md);
            transition: all var(--sc-transition-fast);
            flex-shrink: 0;
            padding: 0 !important;
        }

        .sc-mobile-menu-toggle:hover {
            background: var(--sc-color-surface-subtle);
            color: var(--sc-color-text);
        }

        /* Przycisk X zamykania menu mobilnego — domyślnie ukryty.
           Selektor celowo przez .sc-sidebar (0,2,0), a nie samą klasą (0,1,0):
           przy równej specyficzności decydowała kolejność arkuszy, a CSS panelu nie
           zawsze jest ostatni. Regułę pokazującą (.sc-sidebar.sc-sidebar-open …, 0,3,0)
           to nadal przebija. */
        .sc-sidebar .sc-mobile-sidebar-close,
        .sc-mobile-sidebar-close {
            display: none;
        }

        /* Version info - w topbarze */
        .sc-topbar .version-info {
            position: static;
            opacity: 0.4;
            font-size: 11px;
            color: var(--sc-color-text-tertiary);
            font-weight: 500;
            pointer-events: none;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .sc-topbar .version-info .sc-tutorial-btn {
            pointer-events: all;
            opacity: 1;
        }

        table {
            font-size: 0.9em;
            border-collapse: collapse;
        }

        hr {
            margin: 0 !important;
            border: none;
            border-top: 1px solid var(--sc-color-border-subtle);
        }

        .emoji {
            max-width: 16px;
        }

        span.code {
            word-break: break-all;
        }

        /* === SCROLLBAR === */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #D1D5DB;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #9CA3AF;
        }

        /* === HEADINGS === */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 600 !important;
            color: var(--sc-color-text);
            letter-spacing: -0.01em;
        }

        h1 {
            margin-top: 0 !important;
            margin-bottom: 24px !important;
            font-size: 22px !important;
        }

        /* H1 w zakładkach — zbędne, tytuł widoczny w topbarze */
        .sc-content .tab-content>.wrap>h1,
        .sc-content .tab-content>h1 {
            display: none !important;
        }

        /* === VERSION INFO — teraz w sc-topbar === */
        .version-info {
            font-size: 11px;
            color: var(--sc-color-text-tertiary);
            font-weight: 500;
            opacity: 0.35;
            pointer-events: none;
        }

        /* === LOADING STATE === */
        .loading:not(.modal) {
            opacity: 0.45;
            pointer-events: none;
            transition: opacity var(--sc-transition-base);
        }

        /* === TAB CONTENT === */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* .wrap inside sc-content */
        .sc-content .wrap,
        .sc-content .SoulConnect {
            padding: 0 !important;
        }

        /* ======================
               BUTTONS
               ====================== */
        [type=button]:focus,
        [type=button]:hover,
        [type=submit]:focus,
        [type=submit]:hover,
        button:focus,
        button:hover {
            background-color: unset;
        }

        .SoulConnect .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 9px 16px;
            font-size: 13px;
            font-weight: 600;
            border-radius: var(--sc-radius-md);
            cursor: pointer;
            transition: all var(--sc-transition-fast);
            text-decoration: none !important;
            border: 1px solid var(--sc-color-border);
            color: var(--sc-color-text);
            background: var(--sc-color-surface);
            font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
            line-height: 1.4;
        }

        .SoulConnect .button:hover {
            background: var(--sc-color-surface-subtle);
            border-color: #D1D5DB;
            transform: translateY(-1px);
            box-shadow: var(--sc-shadow-xs);
        }

        .SoulConnect .button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
            border-color: var(--sc-color-accent);
        }

        .SoulConnect .button-primary {
            background: var(--sc-darkest-color, rgba(43, 43, 63, 1));
            color: white;
            border: 1px solid var(--sc-darkest-color, rgba(43, 43, 63, 1));
        }

        .SoulConnect .button-primary:hover {
            background: #1f1f33;
            border-color: #1f1f33;
            box-shadow: 0 2px 8px rgba(43, 43, 63, 0.25);
        }

        .SoulConnect .button-secondary {
            background: var(--sc-dark-trash, rgba(94, 93, 111, 1));
            color: white;
            border-color: var(--sc-dark-trash, rgba(94, 93, 111, 1));
        }

        .SoulConnect .button-secondary:hover {
            opacity: 0.9;
            box-shadow: var(--sc-shadow-sm);
            color: var(--sc-darkest-color);
        }

        .SoulConnect .button-small {
            font-size: 12px;
            padding: 5px 10px;
            border-radius: var(--sc-radius-sm);
            font-weight: 500;
            letter-spacing: 0.02em;
            margin: 0 !important;
        }

        .SoulConnect button.remove-payment,
        .SoulConnect button.remove-addon {
            border: none !important;
            color: var(--sc-color-error) !important;
            cursor: pointer;
            margin: 0 !important;
            padding: 2px 4px !important;
            background: transparent;
            font-size: 12px;
            text-decoration: underline;
            font-weight: 500;
        }

        /* View buttons (calendar) */
        .view-buttons {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .view-buttons .button.active {
            background: var(--sc-darkest-color, rgba(43, 43, 63, 1)) !important;
            color: white !important;
            border-color: var(--sc-darkest-color, rgba(43, 43, 63, 1)) !important;
        }

        .view-buttons .button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        /* ======================
               FORM ELEMENTS
               ====================== */
        .SoulConnect input[type=text],
        .SoulConnect input[type=url],
        .SoulConnect select,
        .SoulConnect input[type=email],
        .SoulConnect input[type=date],
        .SoulConnect input[type=number],
        .SoulConnect input[type=tel],
        .SoulConnect input[type=search],
        .SoulConnect input[type=password],
        .SoulConnect input[type=time],
        .SoulConnect textarea:not(.select2-search__field),
        .select2-dropdown,
        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-search--dropdown .select2-search__field,
        .select2-container--default .selection .select2-selection.select2-selection--multiple {
            border: 1px solid var(--sc-color-border) !important;
            border-radius: var(--sc-radius-md) !important;
            box-shadow: none !important;
            height: auto !important;
            margin: 0 !important;
            width: 100%;
            padding: 9px 12px !important;
            font-family: "Inter Tight", sans-serif !important;
            color: var(--sc-color-text) !important;
            min-height: 42px !important;
            background: var(--sc-color-surface) !important;
            transition: border-color var(--sc-transition-fast), box-shadow var(--sc-transition-fast);
            font-size: 14px !important;
        }

        .SoulConnect input:focus,
        .SoulConnect select:focus,
        .SoulConnect textarea:focus {
            border-color: var(--sc-color-accent) !important;
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1) !important;
            outline: none;
        }

        .SoulConnect label {
            margin-top: 10px;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            width: 100%;
            gap: 5px;
            font-size: 13px;
            font-weight: 500;
            color: var(--sc-color-text-secondary);
        }

        .SoulConnect label small {
            color: var(--sc-color-text-tertiary);
            font-weight: 400;
        }

        /* Radio buttons */
        input[type="radio"] {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--sc-color-surface);
            width: 20px !important;
            height: 20px !important;
            border-radius: 100% !important;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 !important;
            border: 2px solid var(--sc-color-border) !important;
            flex-shrink: 0;
            cursor: pointer;
            transition: border-color var(--sc-transition-fast);
        }

        input[type="radio"]:checked {
            border-color: var(--sc-darkest-color, rgba(43, 43, 63, 1)) !important;
        }

        input[type="radio"]::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            background-color: var(--sc-darkest-color, rgba(43, 43, 63, 1));
        }

        input[type="radio"]:checked::before {
            transform: scale(1);
        }

        /* Checkboxes */
        input[type="checkbox"] {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--sc-color-surface);
            width: 22px !important;
            height: 22px !important;
            display: inline-flex !important;
            justify-content: center;
            align-items: center;
            margin: 0 !important;
            padding: 0 !important;
            border: 2px solid var(--sc-color-border);
            border-radius: var(--sc-radius-sm);
            flex-shrink: 0;
            cursor: pointer;
            transition: all var(--sc-transition-fast);
        }

        input[type="checkbox"]:checked {
            background-color: var(--sc-darkest-color, rgba(43, 43, 63, 1));
            border-color: var(--sc-darkest-color, rgba(43, 43, 63, 1));
        }

        input[type="checkbox"]::before {
            content: "";
            display: flex;
            width: 10px;
            height: 10px;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            background-color: white;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }

        input[type="checkbox"]:checked::before {
            transform: scale(1);
        }

        .checkbox-label {
            flex-direction: row !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            cursor: pointer;
        }

        label.row {
            flex-direction: row !important;
            align-items: center;
            margin: 0 !important;
            cursor: pointer;
        }

        /* ======================
               FILTERS
               ====================== */
        .filters-controls {
            border-radius: var(--sc-radius-lg);
            padding: 20px;
            background: var(--sc-color-surface);
            border: 1px solid var(--sc-color-border);
            align-items: flex-start;
            flex-direction: column;
            justify-content: center;
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
        }

        .filters-controls>h3 {
            font-size: 14px !important;
            margin: 0;
            color: var(--sc-color-text);
            font-weight: 600 !important;
            letter-spacing: -0.01em;
        }

        .filters-container {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            width: 100%;
            align-items: center;
        }

        .filters-container label:not(.row) {
            margin-top: 0 !important;
            padding-bottom: 0 !important;
        }

        .filters-container>div {
            min-width: 180px;
        }

        /* ======================
               ANALYTICS DASHBOARD
               ====================== */
        .sc-analytics-dashboard {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 20px 0 24px;
        }

        .sc-analytics-dashboard__hero,
        .sc-analytics-panel,
        .sc-analytics-metric,
        .sc-analytics-insight {
            background: var(--sc-color-surface);
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-xl);
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
        }

        .sc-analytics-dashboard__hero {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 24px;
            background:
                radial-gradient(circle at top right, rgba(108, 99, 255, 0.16), transparent 34%),
                linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
        }

        .sc-analytics-kicker {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #6C63FF;
            margin-bottom: 8px;
        }

        .sc-analytics-dashboard__title {
            margin: 0 0 8px !important;
            font-size: 24px !important;
            font-weight: 700 !important;
        }

        .sc-analytics-dashboard__subtitle {
            margin: 0;
            max-width: 720px;
            color: var(--sc-color-text-secondary);
            line-height: 1.6;
        }

        .sc-analytics-period-badge {
            min-width: 170px;
            padding: 14px 16px;
            border-radius: 16px;
            background: rgba(108, 99, 255, 0.08);
            border: 1px solid rgba(108, 99, 255, 0.16);
            color: #4338ca;
            display: flex;
            flex-direction: column;
            gap: 4px;
            text-align: right;
        }

        .sc-analytics-period-badge strong {
            font-size: 16px;
            line-height: 1.2;
        }

        .sc-analytics-period-badge span {
            font-size: 12px;
        }

        .sc-analytics-metrics-grid,
        .sc-analytics-insights-grid,
        .sc-analytics-visual-grid,
        .sc-analytics-rankings-grid {
            display: grid;
            gap: 16px;
        }

        .sc-analytics-metrics-grid {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }

        .sc-analytics-insights-grid {
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        }

        .sc-analytics-visual-grid {
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        }

        .sc-analytics-rankings-grid {
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        }

        .sc-analytics-metric,
        .sc-analytics-insight,
        .sc-analytics-panel {
            padding: 20px;
        }

        .sc-analytics-metric {
            position: relative;
            overflow: hidden;
        }

        .sc-analytics-metric::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 4px;
            background: #6C63FF;
        }

        .sc-analytics-metric--blue::before {
            background: #0ea5e9;
        }

        .sc-analytics-metric--green::before {
            background: #22c55e;
        }

        .sc-analytics-metric--purple::before {
            background: #8b5cf6;
        }

        .sc-analytics-metric--orange::before {
            background: #f59e0b;
        }

        .sc-analytics-metric__label,
        .sc-analytics-insight__title {
            font-size: 12px;
            font-weight: 600;
            color: var(--sc-color-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .sc-analytics-metric__value,
        .sc-analytics-insight__value {
            margin-top: 8px;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.15;
            color: var(--sc-color-text);
        }

        .sc-analytics-metric__meta,
        .sc-analytics-insight__meta {
            margin-top: 8px;
            font-size: 13px;
            color: var(--sc-color-text-secondary);
        }

        .sc-analytics-insight {
            min-height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 1));
        }

        .sc-analytics-insight--success {
            border-color: rgba(34, 197, 94, 0.22);
        }

        .sc-analytics-insight--info {
            border-color: rgba(14, 165, 233, 0.22);
        }

        .sc-analytics-insight--warning {
            border-color: rgba(245, 158, 11, 0.24);
        }

        .sc-analytics-insight--accent {
            border-color: rgba(108, 99, 255, 0.24);
        }

        .sc-analytics-insight--neutral {
            border-color: rgba(100, 116, 139, 0.22);
        }

        .sc-analytics-insight--purple {
            border-color: rgba(139, 92, 246, 0.22);
        }

        .sc-analytics-panel__header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 18px;
        }

        .sc-analytics-panel__header h4 {
            margin: 0 !important;
            font-size: 16px !important;
        }

        .sc-analytics-panel__header span {
            font-size: 12px;
            color: var(--sc-color-text-secondary);
            text-align: right;
        }

        .sc-analytics-donut-layout {
            display: grid;
            grid-template-columns: minmax(180px, 220px) 1fr;
            gap: 20px;
            align-items: center;
        }

        .sc-analytics-donut {
            width: 220px;
            height: 220px;
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
        }

        .sc-analytics-donut__hole {
            width: 122px;
            height: 122px;
            border-radius: 50%;
            background: var(--sc-color-surface);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 16px;
            box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
        }

        .sc-analytics-donut__hole strong {
            font-size: 15px;
            line-height: 1.25;
        }

        .sc-analytics-donut__hole span {
            font-size: 11px;
            color: var(--sc-color-text-secondary);
            margin-top: 6px;
        }

        .sc-analytics-legend {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .sc-analytics-legend__item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .sc-analytics-legend__dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            margin-top: 6px;
            flex-shrink: 0;
        }

        .sc-analytics-legend__text strong {
            display: block;
            font-size: 13px;
            color: var(--sc-color-text);
        }

        .sc-analytics-legend__text span {
            display: block;
            font-size: 12px;
            color: var(--sc-color-text-secondary);
            margin-top: 2px;
        }

        .sc-analytics-ranking+.sc-analytics-ranking {
            margin-top: 22px;
            padding-top: 22px;
            border-top: 1px solid var(--sc-color-border-subtle);
        }

        .sc-analytics-ranking h5 {
            margin: 0 0 14px !important;
            font-size: 14px !important;
            color: var(--sc-color-text);
        }

        .sc-analytics-bars {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .sc-analytics-bar__top {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: baseline;
            margin-bottom: 6px;
        }

        .sc-analytics-bar__label {
            font-size: 13px;
            font-weight: 600;
            color: var(--sc-color-text);
        }

        .sc-analytics-bar__value,
        .sc-analytics-bar__meta {
            font-size: 12px;
            color: var(--sc-color-text-secondary);
        }

        .sc-analytics-bar__track {
            height: 9px;
            border-radius: 999px;
            background: #eef2ff;
            overflow: hidden;
        }

        .sc-analytics-bar__fill {
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #6C63FF, #8B5CF6);
        }

        .sc-analytics-bar__meta {
            margin-top: 6px;
        }

        .sc-analytics-empty {
            padding: 24px 12px;
            text-align: center;
            font-size: 13px;
            color: var(--sc-color-text-secondary);
            background: var(--sc-color-surface-subtle);
            border: 1px dashed var(--sc-color-border);
            border-radius: var(--sc-radius-lg);
        }

        .filters-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            width: 100%;
            margin-top: 4px;
        }

        .arrows,
        #add-staff-button {
            margin-left: auto;
        }

        .arrows {
            display: flex !important;
            flex-direction: row !important;
            gap: 4px !important;
            justify-content: flex-end;
        }

        /* ======================
               MODALS — PREMIUM
               ====================== */
        .SoulConnect .modal {
            position: fixed;
            width: 540px;
            background: var(--sc-color-surface);
            padding: 24px;
            border-radius: var(--sc-radius-xl);
            display: flex;
            flex-direction: column;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            box-shadow:
                0 0 0 9999px rgba(15, 18, 28, 0.45),
                0 24px 64px rgba(0, 0, 0, 0.16),
                0 8px 24px rgba(0, 0, 0, 0.08);
            z-index: 9;
            max-height: 90svh;
            overflow: auto;
            border: 1px solid var(--sc-color-border-subtle);
            align-items: flex-start;
            height: max-content;
            max-width: 100%;
            z-index: 99999;
        }

        .modal.wide {
            width: 1300px !important;
            flex-direction: row !important;
            gap: 32px;
            max-width: 96%;
        }

        .modal.loading>*:not(.close-modal) {
            opacity: 0.45;
            pointer-events: none;
            filter: blur(4px);
        }

        .modal>.column:not(.flexrow) {
            width: 50%;
        }

        .close-modal {
            width: 28px;
            height: 28px;
            border: 1px solid var(--sc-color-border);
            background-color: var(--sc-color-surface);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px;
            cursor: pointer;
            text-indent: -9999px;
            position: absolute;
            right: 16px;
            top: 16px;
            padding: 0 !important;
            border-radius: var(--sc-radius-md);
            transition: all var(--sc-transition-fast);
            opacity: 1;
            z-index: 1;
        }

        .close-modal:hover {
            background-color: var(--sc-color-surface-subtle);
            border-color: #D1D5DB;
            opacity: 1;
        }

        .modal h2 {
            font-size: 18px !important;
            font-weight: 600 !important;
            margin-bottom: 20px !important;
            padding-right: 40px;
        }

        .modal h3,
        .modal h4 {
            margin-top: 0 !important;
            font-size: 15px !important;
        }

        .modal h5 {
            margin-top: 20px;
            margin-bottom: 8px;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: var(--sc-color-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .SoulConnect .modal .select2-container {
            width: 100% !important;
        }

        #add-client-modal {
            z-index: 100100;
        }

        .SoulConnect .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--sc-color-border-subtle);
        }

        .sc-reservation-unsaved-notice {
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: var(--sc-radius-md);
            border: 1px solid #F7D9A8;
            background: #FFF7E8;
            color: #8A5A00;
            font-size: 13px;
            line-height: 1.45;
        }

        #add-reservation.has-unsaved-changes {
            box-shadow: 0 0 0 3px rgba(70, 180, 80, 0.18);
        }

        /* ======================
               TABLES
               ====================== */
        .table-container {
            width: 100%;
        }

        .table-container table {
            width: 100% !important;
        }

        table td,
        table th {
            padding: 10px 12px;
            vertical-align: middle;
            border: none !important;
            border-bottom: 1px solid var(--sc-color-border-subtle) !important;
            text-align: left;
            font-size: 13px;
        }

        table thead th {
            background-color: var(--sc-color-surface-subtle) !important;
            font-weight: 600;
            color: var(--sc-color-text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 10px 12px;
            border-bottom: 1px solid var(--sc-color-border) !important;
        }

        table tbody>tr:nth-child(odd)>td,
        table tbody>tr:nth-child(odd)>th {
            background: transparent !important;
        }

        table tbody tr:hover>td {
            background: var(--sc-color-surface-subtle) !important;
        }

        table caption+thead tr:first-child td,
        table caption+thead tr:first-child th,
        table colgroup+thead tr:first-child td,
        table colgroup+thead tr:first-child th,
        table thead:first-child tr:first-child td {
            border-block-start: unset !important;
        }

        /* DataTable specific */
        table.dataTable {
            border-collapse: separate !important;
            border-spacing: 0;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-lg);
            overflow: hidden;
            font-size: 13px;
            background: var(--sc-color-surface);
        }

        table.dataTable thead {
            background-color: var(--sc-color-surface-subtle);
            font-weight: 600;
            color: var(--sc-color-text-secondary);
        }

        table.dataTable thead th {
            padding: 12px !important;
            border-bottom: 1px solid var(--sc-color-border) !important;
        }

        table.dataTable tbody td {
            padding: 10px 12px !important;
            border-bottom: 1px solid var(--sc-color-border-subtle) !important;
            color: var(--sc-color-text);
        }

        table.dataTable tbody tr:hover {
            background-color: var(--sc-color-surface-subtle) !important;
        }

        #payment-log-body td {
            padding: 8px !important;
        }

        #reservation-payments {
            width: 100% !important;
        }

        #price-history-content td,
        #price-history-content th {
            font-size: 0.75em;
            white-space: nowrap;
        }

        table.dataTable tbody th,
        table.dataTable tbody td {
            vertical-align: middle;
        }

        /* DataTables chrome */
        .dataTables_wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 24px !important;
            row-gap: 16px;
        }

        .dataTables_wrapper:after {
            display: none !important;
        }

        .dataTables_info {
            font-size: 12px;
            color: var(--sc-color-text-tertiary);
            padding: 0 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: var(--sc-radius-sm) !important;
            border: 1px solid var(--sc-color-border) !important;
            padding: 6px 10px !important;
            margin: 2px !important;
            background: var(--sc-color-surface) !important;
            color: var(--sc-color-text) !important;
            transition: all var(--sc-transition-fast) !important;
            font-size: 13px !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: var(--sc-color-surface-subtle) !important;
            border-color: #D1D5DB !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: var(--sc-darkest-color, rgba(43, 43, 63, 1)) !important;
            color: white !important;
            border-color: var(--sc-darkest-color, rgba(43, 43, 63, 1)) !important;
        }

        .dataTables_wrapper .dataTables_filter input {
            padding: 6px 10px;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-md);
            margin-left: 8px;
        }

        .dataTables_wrapper .dataTables_length select {
            padding-right: 20px !important;
            line-height: 1em;
        }

        .dataTables_length label {
            flex-direction: row !important;
            align-items: center !important;
        }

        /* ======================
               SELECT2
               ====================== */
        .select2-container {
            z-index: 10;
            width: 100% !important;
        }

        .select2-results__option--highlighted.select2-results__option--selectable,
        .select2-results__option--highlighted {
            background-color: var(--sc-darkest-color, #2B2B3F) !important;
            color: white !important;
        }

        .select2-results__option {
            cursor: pointer;
            padding: 8px 12px;
            font-size: 13px;
            transition: background var(--sc-transition-fast);
        }

        .select2-container--default .select2-selection--single {
            background-color: var(--sc-color-surface);
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-md);
            padding: 6px 10px;
            height: auto !important;
            font-size: 14px;
            display: flex !important;
            align-items: center;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: var(--sc-color-text);
            line-height: 1.5;
            padding: 0 !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100% !important;
            right: 10px !important;
            top: 0 !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__clear {
            line-height: 1em;
            padding: 0 !important;
            margin-right: 5px !important;
        }

        .select2-container--open .select2-dropdown {
            background: var(--sc-color-surface) !important;
        }

        /* Select2 dropdown zawsze nad modalami */
        .select2-container--open {
            z-index: 999999 !important;
        }

        .select2-dropdown {
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-md) !important;
            box-shadow: var(--sc-shadow-lg);
            z-index: 999999 !important;
        }

        .select2-container--default .select2-selection--multiple {
            background-color: var(--sc-color-surface);
            border: none !important;
            border-radius: var(--sc-radius-md);
            min-height: 38px;
            padding: 4px 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: var(--sc-darkest-color, #2B2B3F) !important;
            color: #fff !important;
            border: none;
            padding: 3px 10px;
            border-radius: var(--sc-radius-sm);
            font-size: 12px;
            display: inline-flex !important;
            min-height: 22px;
            align-items: center;

        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            height: 100%;
            color: rgba(255, 255, 255, 0.6) !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: white !important;
        }

        .select2-container--default .select2-search--inline .select2-search__field {
            width: 100% !important;
            font-family: 'Inter Tight' !important;
            margin: 0 !important;
            outline-offset: 0 !important;
            line-height: 1em;
            height: auto !important;
        }

        .select2-container .select2-selection--multiple .select2-selection__rendered {
            margin-left: 0 !important;
        }


        /* ======================
               CARDS & BOXES
               ====================== */
        .graybox {
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-lg);
            padding: 16px;
            background: var(--sc-color-surface-subtle);
        }

        .flexrow {
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: flex-end;
            width: 100%;
        }

        .flexrow.column {
            flex-direction: column;
        }

        .wrap {
            flex-wrap: wrap;
        }

        .gap40 {
            gap: 32px !important;
        }

        /* ======================
               LOGIN FORM
               ====================== */
        .login-form-container {
            max-width: 420px;
            margin: 60px auto;
            box-shadow: var(--sc-shadow-lg);
            padding: 32px;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-xl);
            background: var(--sc-color-surface);
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            font-size: 13px;
            color: var(--sc-color-text-secondary);
        }

        .form-group input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-md);
            transition: border-color var(--sc-transition-fast);
        }

        .form-group input:focus {
            border-color: var(--sc-color-accent);
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
            outline: none;
        }

        .forgot-password-link {
            text-align: center;
            margin-top: 16px;
        }

        .forgot-password-link a {
            color: var(--sc-color-text-tertiary);
            text-decoration: none;
            font-size: 13px;
            transition: color var(--sc-transition-fast);
        }

        .forgot-password-link a:hover {
            color: var(--sc-darkest-color, rgba(43, 43, 63, 1));
            text-decoration: underline;
        }

        /* ======================
               FULLCALENDAR
               ====================== */
        .fc-bg-event {
            border: var(--fc-bg-event-border);
        }

        .fc-header-toolbar {
            display: none !important;
        }

        .fc-license-message {
            display: none !important;
        }

        .fc-timegrid-day.fc-day-today {
            background-color: transparent;
        }

        #personel-calendar .fc-timegrid-header .fc-cell-inner {
            font-weight: 700;
        }

        .fc-v-event .fc-event-inner {
            box-shadow: -3px -3px 10px 0px rgba(0, 0, 0, 0.08);
            padding: 5px !important;
        }

        .fc-resource-daygrid-view .fc-daygrid-dot-event {
            color: var(--sc-darkest-color, rgba(43, 43, 63, 1)) !important;
        }

        /* FullCalendar background events (working hours) */
        .fc-event-background {
            opacity: 0.3 !important;
            border: 1px dashed #28a745 !important;
            background-color: #e8f5e8 !important;
        }

        .fc-event-background:hover {
            opacity: 0.5 !important;
            background-color: #d4edda !important;
        }

        .fc-timegrid-slot.fc-slot-working-hours {
            background-color: rgba(40, 167, 69, 0.05) !important;
        }

        /* ======================
               CALENDAR LEGEND
               ====================== */
        .calendar-legend {
            margin-top: 16px;
            padding: 14px 18px;
            background: var(--sc-color-surface);
            border-radius: var(--sc-radius-lg);
            border: 1px solid var(--sc-color-border);
            font-size: 13px;
        }

        .calendar-legend h4 {
            font-size: 13px !important;
            font-weight: 600 !important;
            margin: 0 0 10px 0 !important;
            color: var(--sc-color-text-secondary);
        }

        .calendar-legend span {
            color: var(--sc-color-text-secondary);
            font-size: 13px;
        }

        /* ======================
               CALENDAR REFRESH & NOTIFICATION
               ====================== */
        .refresh-calendar-section {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        #refresh-calendar-btn {
            font-size: 13px;
            padding: 6px 14px;
            min-width: 150px;
            transition: all var(--sc-transition-fast);
        }

        #refresh-calendar-btn:hover {
            transform: translateY(-1px);
        }

        #refresh-calendar-btn:disabled {
            opacity: 0.6;
            cursor: wait;
        }

        .last-refresh-time {
            font-size: 12px;
            color: var(--sc-color-text-tertiary);
            white-space: nowrap;
        }

        .calendar-notification {
            display: flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 18px;
            border-radius: var(--sc-radius-lg);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
            animation: slideInDown 0.4s ease-out, calPulse 2s infinite;
            flex-wrap: wrap;
            margin: 5px 0;
        }

        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes calPulse {

            0%,
            100% {
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
            }

            50% {
                box-shadow: 0 4px 20px rgba(102, 126, 234, 0.55);
            }
        }

        .notification-icon {
            font-size: 20px;
        }

        .notification-text {
            font-weight: 600;
            font-size: 14px;
            flex: 1;
            min-width: 150px;
        }

        .notification-refresh-btn {
            background: white;
            color: #667eea;
            border: none;
            padding: 8px 16px;
            border-radius: var(--sc-radius-md);
            font-weight: 600;
            cursor: pointer;
            transition: all var(--sc-transition-fast);
            font-size: 13px;
        }

        .notification-refresh-btn:hover {
            background: #f0f0f0;
            transform: scale(1.02);
        }

        .notification-close-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            transition: all var(--sc-transition-fast);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .notification-close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        /* ======================
               STAFF PANEL
               ====================== */
        .namepers {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .namepers img {
            width: 48px;
            height: 48px;
            border-radius: var(--sc-radius-full);
            margin-right: 4px;
            border: 2px solid var(--sc-color-border);
            object-fit: cover;
        }

        #staff-photo-preview {
            width: 120px;
            height: 120px;
            border-radius: var(--sc-radius-full);
            overflow: hidden;
            position: relative;
            border: 2px solid var(--sc-color-border);
        }

        #staff-photo-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }

        /* Staff services */
        .staff-service-row>label {
            margin-top: 5px !important;
            align-items: center !important;
            flex-direction: row !important;
            margin-bottom: 5px !important;
            cursor: pointer;
        }

        .staff-service-row {
            display: flex;
            flex-direction: column;
            padding: 8px;
            border-radius: var(--sc-radius-md);
            transition: background var(--sc-transition-fast);
        }

        .staff-service-row:hover {
            background: rgba(0, 0, 0, 0.02);
        }

        .staff-service-row.disabled>*:not(label) {
            opacity: 0.25;
            display: none !important;
        }

        .staff-service-row small {
            width: 100%;
            text-align: left;
        }

        /* Working hours */
        #exceptions-list,
        #free-list {
            max-height: 200px;
            overflow-y: auto;
            gap: 8px;
            display: flex;
            flex-direction: column;
        }

        #staff-services-container {
            max-height: 400px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .dayoff-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding: 6px 8px;
            border-radius: var(--sc-radius-sm);
        }

        .dayoff-row:hover {
            background: rgba(0, 0, 0, 0.02);
        }

        .work-hours-day-block {
            padding: 8px 0;
        }

        #add-service-button {
            margin-left: auto;
        }

        /* ======================
               CATEGORIES
               ====================== */
        .category-tree-list li {
            margin: 0 0 6px 0;
            padding: 10px 12px;
            background: var(--sc-color-surface);
            border-radius: var(--sc-radius-md);
            border: 1px solid var(--sc-color-border);
            transition: border-color var(--sc-transition-fast);
        }

        .category-tree-list li:hover {
            border-color: #D1D5DB;
        }

        .category-tree-list,
        .category-tree-list ul {
            list-style: none;
            padding: 0 !important;
        }

        .category-tree-list .drag-handle {
            cursor: move;
            margin-right: 8px;
            opacity: 0.4;
        }

        .category-tree-list li:hover .drag-handle {
            opacity: 0.8;
        }

        .category-tree-list .cat-actions {
            float: right;
        }

        .category-tree-list .sub-list {
            margin-left: 28px;
            margin-top: 12px;
        }

        /* ======================
               LINKS
               ====================== */
        .addlink {
            display: inline-block;
            width: max-content;
            text-underline-offset: 4px;
            color: var(--sc-color-accent);
            font-weight: 500;
            margin-top: 8px;
            text-decoration: underline !important;
            font-size: 13px;
            transition: color var(--sc-transition-fast);
        }

        .addlink:hover {
            color: var(--sc-darkest-color, rgba(43, 43, 63, 1));
        }

        table .addlink {
            margin-top: 0 !important;
        }

        .reservation-note-table {
            color: var(--sc-color-text-tertiary);
            font-size: 11px;
            line-height: 1.3em;
            display: block;
            font-style: italic;
        }

        /* ======================
               HISTORY ENTRIES
               ====================== */
        .history-entry {
            margin-bottom: 12px;
            padding: 12px 14px;
            border-radius: var(--sc-radius-md);
            background: var(--sc-color-surface);
            box-shadow: var(--sc-shadow-xs);
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-left: 4px solid var(--sc-dark-trash, #5E5D6F);
            border: 1px solid var(--sc-color-border-subtle);
            border-left: 4px solid var(--sc-dark-trash, #5E5D6F);
            transition: box-shadow var(--sc-transition-fast);
        }

        .history-entry:hover {
            box-shadow: var(--sc-shadow-sm);
        }

        .history-entry-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .history-entry-type {
            background: var(--sc-dark-trash, #5E5D6F);
            color: white;
            padding: 3px 10px;
            border-radius: var(--sc-radius-full);
            font-size: 11px;
            font-weight: 600;
        }

        .history-entry-date {
            font-size: 12px;
            color: var(--sc-color-text-tertiary);
            font-weight: 500;
        }

        .history-entry-content {
            margin-top: 4px;
        }

        .history-entry-content p {
            margin: 0 0 4px 0;
            line-height: 1.45;
        }

        .history-entry-content p:last-child {
            margin-bottom: 0;
        }

        .history-entry a {
            color: var(--sc-color-accent) !important;
            text-decoration: underline !important;
            text-underline-offset: 3px;
        }

        /* History type colors - preserved from original */
        .umowa-rezerwacyjna {
            border-left-color: #fd7e14;
        }

        .umowa-rezerwacyjna .history-entry-type {
            background: #fd7e14;
        }

        .zwolnienie {
            border-left-color: #28a745;
        }

        .zwolnienie .history-entry-type {
            background: #28a745;
        }

        .rezerwacja {
            border-left-color: #ffc107;
        }

        .rezerwacja .history-entry-type {
            background: #ffc107;
        }

        .spotkanie-biuro {
            border-left-color: #4CAF50;
        }

        .spotkanie-biuro .history-entry-type,
        .dostepne {
            background: #4CAF50;
        }

        .spotkanie-lokal {
            border-left-color: #2196F3;
        }

        .spotkanie-lokal .history-entry-type {
            background: #2196F3;
        }

        .podpisanie-umowy {
            border-left-color: #FF9800;
        }

        .podpisanie-umowy .history-entry-type,
        .rezerwacja-ustna {
            background: #FF9800;
        }

        .negocjowanie {
            border-left-color: #9C27B0;
        }

        .negocjowanie .history-entry-type {
            background: #9C27B0;
        }

        .notatka {
            border-left-color: #607D8B;
        }

        .notatka .history-entry-type {
            background: #607D8B;
        }

        .telefon {
            border-left-color: #00BCD4;
        }

        .telefon .history-entry-type {
            background: #00BCD4;
        }

        .email {
            border-left-color: #795548;
        }

        .email .history-entry-type {
            background: #795548;
        }

        .sprzedaz {
            border-left-color: #bb0000;
        }

        .sprzedaz .history-entry-type,
        .umowa-deweloperska {
            background: #bb0000;
        }

        .inne {
            border-left-color: #9E9E9E;
        }

        .inne .history-entry-type {
            background: #9E9E9E;
        }

        /* ======================
               CLIENT SECTION
               ====================== */
        .client-info {
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 32px;
            gap: 24px;
        }

        .client-info>.column {
            width: 50% !important;
        }

        #client-history-content {
            width: 100%;
        }

        #client-history-content table {
            margin: 0 !important;
        }

        #client-history-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--sc-color-border);
        }

        #client-history-section h5,
        #client-flats-list h5 {
            margin: 0 0 12px 0;
            color: var(--sc-color-text);
            font-size: 15px !important;
            font-weight: 600 !important;
        }

        #client-flats-list th {
            text-align: left;
        }

        .history-entries {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-lg);
            padding: 16px;
            background: var(--sc-color-surface-subtle);
        }

        #add-history-entry,
        #save-new-client {
            margin-top: 16px;
            margin-bottom: 16px;
        }

        /* ======================
               USAGE HISTORY / MATERIALS
               ====================== */
        #usage-history-content {
            width: 100%;
        }

        .zones-container {
            display: grid;
            align-items: flex-start;
            justify-content: space-between;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .usage-actions {
            margin-top: 24px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .usage-date-container {
            margin-bottom: 16px;
        }

        .usage-history-list {
            margin-top: 16px;
        }

        .material-row {
            margin-bottom: 8px;
            display: flex;
            align-items: flex-end;
            gap: 8px;
        }

        .material-row label {
            margin-top: 0 !important;
            width: auto !important;
        }

        /* ======================
               FLAT STATUS / PROPERTY (legacy)
               ====================== */
        #flat-status {
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            border-radius: var(--sc-radius-full);
            color: white;
            white-space: nowrap;
            line-height: 1.5em;
        }

        #flat-status-label {
            width: auto !important;
        }

        .buttons-row {
            gap: 6px !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
        }

        .buttons-row>span {
            width: 100%;
            display: block;
        }

        #rooms-section,
        #flat-photos-section {
            padding: 20px;
            background: var(--sc-color-surface);
            border-radius: var(--sc-radius-lg);
            border: 1px solid var(--sc-color-border);
            margin-top: 24px;
            margin-bottom: 24px;
        }

        #flat-photos-section {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            align-content: center;
        }

        #flat-photos-section h4 {
            margin-bottom: 0;
        }

        #flat-photos-preview {
            width: 100%;
        }

        #price-history-content {
            background: var(--sc-color-surface-subtle);
            padding: 16px;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-lg);
            max-height: 300px;
            overflow-y: auto;
        }

        #flat-price-history {
            margin-bottom: 20px;
        }

        #flat-history {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #history-content {
            flex-grow: 1;
            overflow-y: auto;
            max-height: 500px;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-lg);
            padding: 16px;
            background: var(--sc-color-surface-subtle);
        }

        .history-add-form {
            margin-top: 10px;
        }

        #history-document {
            padding: 10px 12px;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-md);
            background: var(--sc-color-surface);
            font-size: 14px;
            transition: border-color var(--sc-transition-fast);
        }

        #history-document:focus {
            outline: none;
            border-color: var(--sc-color-accent);
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
        }

        #total-living-area,
        #total-outdoor-area {
            font-weight: 600;
        }

        .remove-room {
            color: var(--sc-color-error) !important;
            background: var(--sc-color-surface-subtle) !important;
        }

        .rooms-summary {
            gap: 0;
            align-items: flex-start;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .rooms-summary p {
            margin: 0;
        }

        #Soulconnect-content .wrap {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        #save-investment {
            margin-top: 10px;
        }

        .last-modified-date {
            font-size: 12px;
            display: block;
            line-height: 1.25em;
            color: var(--sc-color-text-tertiary);
        }

        #flats-list:not(.dataTable) {
            display: none !important;
        }

        /* Sale/status buttons (legacy) */
        #mark-as-sold,
        #confirm-sale {
            background: #bb0000;
        }

        #mark-as-reserved,
        #confirm-reservation {
            background-color: #ffc107;
            color: #000;
        }

        #mark-as-reservation-contract,
        #confirm-reservation-contract {
            background-color: #fd7e14;
        }

        #mark-as-available {
            background-color: #28a745;
        }

        #confirm-sale,
        #confirm-reservation,
        #confirm-reservation-contract,
        #save-client-data-from-page {
            margin-top: 16px;
        }

        #mark-as-sold,
        #mark-as-reserved,
        #mark-as-reservation-contract,
        #mark-as-available {
            font-size: 12px;
            padding: 8px 10px;
            min-height: 37px !important;
        }

        #add-flat {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 18px;
            background: #213537;
        }

        /* ======================
               PHOTOS
               ====================== */
        .photos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px;
        }

        .photo-item {
            position: relative;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-md);
            overflow: hidden;
            background: var(--sc-color-surface);
            transition: all var(--sc-transition-fast);
        }

        .photo-item:hover {
            transform: scale(1.03);
            box-shadow: var(--sc-shadow-md);
        }

        .photo-thumbnail {
            width: 100%;
            height: 120px;
            object-fit: cover;
            display: block;
        }

        .photo-actions {
            position: absolute;
            top: 4px;
            right: 4px;
            display: flex;
            gap: 4px;
        }

        .photo-action-btn {
            background: rgba(0, 0, 0, 0.65);
            color: white;
            border: none;
            border-radius: var(--sc-radius-sm);
            padding: 3px 6px;
            font-size: 10px;
            cursor: pointer;
            transition: background var(--sc-transition-fast);
        }

        .photo-action-btn:hover {
            background: rgba(0, 0, 0, 0.85);
        }

        .photo-name {
            padding: 5px;
            font-size: 11px;
            color: var(--sc-color-text-tertiary);
            text-align: center;
            background: var(--sc-color-surface-subtle);
            word-break: break-word;
        }

        .photo-modal {
            display: none;
            position: fixed;
            z-index: 100100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
        }

        .photo-modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 90%;
            max-height: 90%;
        }

        .photo-modal-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .photo-modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        .photo-modal-close:hover {
            color: #bbb;
        }

        /* ======================
               INLINE EDITING
               ====================== */
        .inline-edit-text:hover,
        .inline-edit-number:hover {
            background-color: var(--sc-color-accent-soft);
            border-radius: var(--sc-radius-sm);
            outline: 1px dashed var(--sc-color-accent);
        }

        .inline-edit-toggle:hover {
            transform: scale(1.15);
            transition: transform var(--sc-transition-fast);
        }

        .inline-edit-color:hover {
            opacity: 0.8;
            outline: 2px solid var(--sc-color-accent);
            border-radius: var(--sc-radius-sm);
        }

        .inline-edit-text input,
        .inline-edit-number input {
            font-family: inherit !important;
            font-size: inherit !important;
        }

        #services-list .inline-edit-text,
        #services-list .inline-edit-number,
        #services-list .inline-edit-toggle,
        #services-list .inline-edit-color {
            transition: all var(--sc-transition-fast);
        }

        .inline-amount-input {
            font-size: 14px;
            max-width: 100px !important;
            -moz-appearance: textfield;
        }

        .inline-amount-input::-webkit-outer-spin-button,
        .inline-amount-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* ======================
               DEMO MODE
               ====================== */
        .demo-mode .demo-blur {
            filter: blur(3px);
            transition: filter var(--sc-transition-slow);
        }

        .demo-mode .demo-blur:hover {
            filter: blur(1px);
        }

        .readonly-mode .modal button:not(.close-modal) {
            opacity: 0.45;
            pointer-events: none;
        }

        /* ======================
               CHAT / MESSAGES
               ====================== */
        .soulconnect-messages-panel {
            max-width: 900px;
        }

        .new-message-section {
            margin-bottom: 24px;
        }

        .form-row {
            margin-bottom: 16px;
        }

        .form-row label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            font-size: 13px;
        }

        .required {
            color: var(--sc-color-error);
        }

        .form-input,
        .form-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-md);
        }

        #message-content {
            resize: vertical;
        }

        #message-status {
            margin-left: 12px;
        }

        .success-message {
            color: var(--sc-color-success);
        }

        .error-message {
            color: var(--sc-color-error);
        }

        .loading-message {
            color: var(--sc-color-warning);
            text-align: center;
        }

        .messages-history-section {
            margin-top: 20px;
        }

        .message-item {
            background: var(--sc-color-surface);
            border: 1px solid var(--sc-color-border);
            border-radius: var(--sc-radius-lg);
            padding: 20px;
            margin-bottom: 12px;
            box-shadow: var(--sc-shadow-xs);
            transition: box-shadow var(--sc-transition-fast);
        }

        .message-item:hover {
            box-shadow: var(--sc-shadow-sm);
        }

        .message-item.unread {
            border-left: 4px solid var(--sc-color-accent);
            background: var(--sc-color-accent-soft);
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 12px;
            border-bottom: 1px solid var(--sc-color-border-subtle);
            padding-bottom: 10px;
        }

        .message-subject {
            font-size: 16px;
            font-weight: 600;
            color: var(--sc-color-text);
            margin: 0 0 4px 0;
        }

        .message-meta {
            font-size: 12px;
            color: var(--sc-color-text-tertiary);
        }

        .message-status-badge {
            padding: 4px 12px;
            border-radius: var(--sc-radius-full);
            font-size: 11px;
            font-weight: 600;
        }

        .message-status-badge.new {
            background: var(--sc-color-accent);
            color: white;
        }

        .message-status-badge.answered {
            background: var(--sc-color-success);
            color: white;
        }

        .message-content {
            line-height: 1.6;
            color: var(--sc-color-text-secondary);
            margin-bottom: 12px;
        }

        .message-reply {
            background: var(--sc-color-success-soft);
            border-left: 3px solid var(--sc-color-success);
            padding: 14px;
            margin-top: 12px;
            border-radius: var(--sc-radius-md);
        }

        .message-reply-header {
            font-weight: 600;
            color: var(--sc-color-success);
            margin-bottom: 6px;
            font-size: 13px;
        }

        .reply-date {
            font-size: 12px;
            color: var(--sc-color-text-tertiary);
            margin-top: 6px;
        }

        .no-messages {
            text-align: center;
            padding: 48px 20px;
            color: var(--sc-color-text-tertiary);
            background: var(--sc-color-surface-subtle);
            border-radius: var(--sc-radius-lg);
            border: 1px dashed var(--sc-color-border);
        }

        /* ======================
               TUTORIAL / ONBOARDING
               ====================== */
        .sc-tutorial-btn {
            margin-left: 12px;
            background: var(--sc-darkest-color) !important;
            color: var(--sc-lightest-color) !important;
            border: 1px solid var(--sc-darkest-color) !important;
            padding: 7px 14px !important;
            border-radius: var(--sc-radius-md) !important;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500 !important;
            font-family: var(--sc-font-family) !important;
            transition: all var(--sc-transition-fast);
            line-height: 1em !important;
        }

        .sc-tutorial-btn:hover {
            opacity: 0.85;
            transform: translateY(-1px);
        }

        .sc-tutorial-btn:active {
            transform: translateY(0);
        }

        @keyframes sc-tutorial-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(43, 43, 63, 0.35);
            }

            50% {
                box-shadow: 0 0 0 8px rgba(43, 43, 63, 0);
            }
        }

        .sc-tutorial-btn.pulse {
            animation: sc-tutorial-pulse 2s ease-in-out infinite;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(400px);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        #sc-tutorial-tooltip,
        #sc-tutorial-tooltip * {
            font-family: var(--sc-font-family) !important;
        }

        #sc-tutorial-next,
        #sc-tutorial-prev {
            background-color: rgba(43, 43, 63, 1) !important;
        }

        /* ======================
               TOAST SYSTEM (injected via JS)
               ====================== */
        .sc-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            border-radius: var(--sc-radius-lg);
            box-shadow: var(--sc-shadow-lg);
            font-family: "Inter Tight", sans-serif;
            animation: scToastSlideUp 0.3s ease;
            max-width: 380px;
        }

        .sc-toast-success {
            background: var(--sc-color-success-soft);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .sc-toast-error {
            background: var(--sc-color-error-soft);
            border: 1px solid rgba(239, 68, 68, 0.2);
        }

        .sc-toast-info {
            background: var(--sc-color-info-soft);
            border: 1px solid rgba(59, 130, 246, 0.2);
        }

        .sc-toast-warning {
            background: var(--sc-color-warning-soft);
            border: 1px solid rgba(245, 158, 11, 0.2);
        }

        @keyframes scToastSlideUp {
            from {
                transform: translateY(16px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* ======================
               RESPONSIVE — TABLET (769–1024px)
               ====================== */
        @media (min-width: 769px) and (max-width: 1024px) {
            :root {
                --sc-sidebar-width: 64px;
            }

            .sc-logo-text,
            .sc-nav-label,
            .sc-sidebar .nav-item span,
            .sc-sidebar-footer .nav-item span {
                display: none;
            }

            .sc-sidebar .nav-item {
                justify-content: center;
                padding: 10px;
                gap: 0;
            }

            .sc-sidebar .nav-item.active::before {
                display: none;
            }

            .sc-sidebar-logo {
                padding: 16px;
                justify-content: center;
            }

            .sc-logo-icon {
                width: 36px;
                height: 36px;
            }

            .sc-sidebar-footer {
                padding: 8px;
            }

            .sc-sidebar-footer .nav-item {
                justify-content: center;
                padding: 10px;
            }

            .sc-nav-icon {
                width: 20px;
                height: 20px;
            }

            .modal>.column:not(.flexrow) {
                width: 100% !important;
            }

            .modal.wide {
                flex-direction: column !important;
                flex-wrap: nowrap !important;
                gap: 0;
            }

            .filters-container {
                gap: 8px;
            }

            .filters-container>div {
                min-width: 150px;
            }
        }

        /* ======================
               RESPONSIVE — MOBILE (≤768px)
               ====================== */
        @media (max-width: 768px) {

            /* Sidebar → bottom nav */
            .sc-layout {
                flex-direction: column;
            }

            .sc-sidebar {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                top: auto;
                width: 100% !important;
                height: auto;
                flex-direction: row;
                z-index: 999;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
            }

            .sc-sidebar-logo,
            .sc-sidebar-footer,
            .sc-nav-label {
                display: none;
            }

            .sc-nav-group {
                display: contents;
            }

            .sc-sidebar .soulconnect-nav {
                flex-direction: row;
                padding: 4px 6px;
                gap: 2px;
                width: 100%;
                flex-wrap: nowrap;
                overflow-x: auto;
                border-bottom: none;
                margin-bottom: 0;
            }

            .sc-sidebar .nav-item {
                flex-direction: column;
                gap: 3px;
                padding: 6px 10px;
                font-size: 10px;
                min-width: 54px;
                min-height: 54px;
                text-align: center;
                flex-shrink: 0;
                justify-content: center;
                border: none;
            }

            .sc-sidebar .nav-item span {
                display: block;
                font-size: 9px;
                line-height: 1.2;
                white-space: nowrap;
            }

            .sc-sidebar .nav-item.active::before {
                display: none;
            }

            .sc-sidebar .nav-item.active {
                background: rgba(108, 99, 255, 0.25);
                border-radius: var(--sc-radius-md);
            }

            .sc-sidebar .sc-nav-icon {
                width: 18px;
                height: 18px;
            }

            .sc-sidebar .sc-nav-locked {
                display: none;
            }

            /* Main content — padding-bottom dla bottom nav */
            .sc-main {
                padding-bottom: 72px;
            }

            .sc-content {
                padding: 12px;
            }

            /* Mobile menu toggle — widoczny */
            .sc-mobile-menu-toggle {
                display: flex;
            }

            /* Topbar nad overlayem — drugi tap na hamburger zamyka menu */
            .sc-layout:has(#sc-sidebar.sc-sidebar-open) .sc-topbar {
                z-index: 1002;
            }

            /* Przycisk zamknięcia (X) nad overlayem menu */
            .sc-sidebar.sc-sidebar-open .sc-mobile-sidebar-close {
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                top: 10px;
                right: 10px;
                z-index: 1003;
                width: 44px;
                height: 44px;
                margin: 0;
                padding: 0;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: var(--sc-radius-md);
                background: rgba(255, 255, 255, 0.12);
                color: rgba(255, 255, 255, 0.95);
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }

            .sc-sidebar.sc-sidebar-open .sc-mobile-sidebar-close:hover {
                background: rgba(255, 255, 255, 0.22);
                color: #fff;
            }

            /* Sidebar otwarty jako overlay pełnoekranowy */
            .sc-sidebar.sc-sidebar-open {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100% !important;
                height: 100%;
                flex-direction: column;
                z-index: 1000;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .sc-sidebar.sc-sidebar-open .sc-sidebar-logo {
                display: flex;
            }

            .sc-sidebar.sc-sidebar-open .sc-sidebar-footer {
                display: block;
            }

            .sc-sidebar.sc-sidebar-open .sc-nav-label {
                display: block;
            }

            .sc-sidebar.sc-sidebar-open .sc-nav-group {
                display: block;
            }

            .sc-sidebar.sc-sidebar-open .soulconnect-nav {
                flex-direction: column;
                overflow-x: hidden;
            }

            .sc-sidebar.sc-sidebar-open .nav-item {
                flex-direction: row;
                justify-content: flex-start;
                padding: 11px 12px;
                min-height: 44px;
                font-size: 14px;
                min-width: unset;
                text-align: left;
                gap: 10px;
            }

            .sc-sidebar.sc-sidebar-open .nav-item span {
                font-size: 14px;
                display: block;
            }

            .sc-sidebar.sc-sidebar-open .sc-nav-icon {
                width: 20px;
                height: 20px;
            }

            /* Top bar */
            .sc-topbar {
                padding: 0 12px;
                height: 48px;
            }

            .sc-page-title {
                font-size: 15px !important;
            }

            .sc-topbar .version-info {
                display: none;
            }

            /* Modals → full screen */
            .SoulConnect .modal {
                width: 100% !important;
                max-width: 100% !important;
                height: 100svh !important;
                max-height: 100svh !important;
                border-radius: 0 !important;
                top: 0 !important;
                left: 0 !important;
                transform: none !important;
                padding: 16px;
                overflow-y: auto;
            }

            .modal.wide {
                flex-direction: column !important;
                gap: 0 !important;
            }

            .modal>.column:not(.flexrow) {
                width: 100% !important;
            }

            /* Tables → horizontal scroll */
            .table-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .table-container table {
                min-width: 600px;
            }

            .dataTables_wrapper {
                overflow-x: auto;
            }

            /* Filters → stacked */
            .filters-container {
                display: flex !important;
                flex-direction: column;
                gap: 8px;
            }

            .filters-container>div {
                min-width: 100% !important;
                width: 100%;
            }

            .filters-controls {
                padding: 12px;
            }

            .sc-analytics-dashboard__hero,
            .sc-analytics-donut-layout,
            .sc-analytics-panel__header,
            .sc-analytics-bar__top {
                grid-template-columns: 1fr;
                flex-direction: column;
            }

            .sc-analytics-period-badge,
            .sc-analytics-panel__header span {
                text-align: left;
            }

            .sc-analytics-donut {
                width: 190px;
                height: 190px;
            }

            .sc-analytics-donut__hole {
                width: 108px;
                height: 108px;
            }

            .sc-analytics-rankings-grid,
            .sc-analytics-visual-grid {
                grid-template-columns: 1fr;
            }

            /* Toast → nad bottom nav */
            .sc-toast {
                bottom: 78px !important;
                right: 12px;
                left: 12px;
                max-width: none;
            }

            /* Refresh calendar */
            .refresh-calendar-section {
                width: 100%;
            }

            #refresh-calendar-btn {
                flex: 1;
            }

            .last-refresh-time {
                width: 100%;
                text-align: center;
            }

            .calendar-notification {
                width: 100%;
                justify-content: center;
            }

            .message-header {
                flex-direction: column;
                gap: 10px;
            }

            .SoulConnect label {
                font-size: 13px;
            }

            label.row {
                line-height: 1.25em;
            }

            input[type="checkbox"] {
                width: 20px !important;
                height: 20px !important;
            }

            input[type="checkbox"]::before {
                width: 10px !important;
                height: 10px !important;
            }

            h1 {
                font-size: 20px !important;
                margin-bottom: 12px !important;
            }

            h2 {
                font-size: 18px;
            }

            .namepers img {
                width: 32px;
                height: 32px;
            }

            .SoulConnect input[type=text],
            .SoulConnect input[type=url],
            .SoulConnect select,
            .SoulConnect input[type=email],
            .SoulConnect input[type=date],
            .SoulConnect input[type=number],
            .SoulConnect input[type=tel],
            .SoulConnect input[type=search],
            .SoulConnect input[type=password],
            .SoulConnect input[type=time],
            .SoulConnect textarea:not(.select2-search__field),
            .select2-dropdown,
            .select2-container--default .select2-selection--single,
            .select2-container--default .select2-search--dropdown .select2-search__field,
            .select2-container--default .selection .select2-selection.select2-selection--multiple {
                font-size: 16px !important;
                min-height: 44px !important;
            }

            .SoulConnect .button {
                min-height: 44px;
                font-size: 13px !important;
                padding: 10px 14px !important;
            }

            .SoulConnect .button-small {
                min-height: 36px;
                font-size: 11px !important;
            }

            .addlink {
                margin-top: 0 !important;
            }

            .modal h3,
            .modal h4 {
                font-size: 17px !important;
            }

            table td {
                font-size: 12px !important;
                padding: 6px !important;
            }

            table th {
                font-size: 10px !important;
                padding: 6px !important;
            }

            .zones-container {
                grid-template-columns: repeat(1, 1fr);
            }

            .usage-history-list {
                overflow: auto;
            }

            .zone-section h4 {
                margin-bottom: 0 !important;
            }

            .material-row {
                flex-wrap: wrap;
            }

            #staff-account-actions {
                margin-top: 16px !important;
            }

            ul,
            ol {
                margin: 0 !important;
            }
        }

/* =============================================================================
   POLE PROCENTOWE (.sc-pct) — wspólny komponent dla stawek VAT i prowizji.

   Zastępuje goły <input type="number" style="width:80px"> z doklejonym obok
   znakiem „%". Trzy rzeczy, które to naprawia:

   1. „%" jest W polu, a nie luźnym tekstem obok — wiadomo, czego dotyczy,
      i nie rozjeżdża się przy zawijaniu komórki tabeli.
   2. Zablokowane strzałki i scroll. Pole liczbowe pod kursorem zmieniało
      wartość przy przewijaniu strony — przy stawkach wynagrodzeń to cicha
      zmiana pensji, której nikt nie zauważy. Teraz kółko myszy nic nie robi.
   3. Miejsce na znacznik autozapisu (.sc-pct__state) — bez przesuwania układu,
      bo kropka siedzi w stałym slocie po prawej.

   Kolory WYŁĄCZNIE z tokenów instancji (--sc-*), żeby pole wyglądało jak
   reszta panelu danego salonu, a nie jak wstawka znikąd.
   ============================================================================= */

.sc-pct {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* Ta sama wysokość co pozostałe pola panelu — inaczej „%” stoi w innej linii
       niż sąsiedni select i wygląda jak doklejone. */
    min-height: 38px;
    padding: 0 10px;
    background: var(--sc-color-surface);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    max-width: 100%;
}

.sc-pct:hover {
    border-color: var(--sc-color-accent);
}

.sc-pct:focus-within {
    border-color: var(--sc-color-accent);
    box-shadow: 0 0 0 3px var(--sc-color-accent-soft);
}

/* Pole liczbowe W ŚRODKU ramki komponentu.
   ZGŁOSZONE: „wygląda jak input w inpucie”. Powód: wyzerowana była tylko `border`.
   Tło, zaokrąglenie, cień i wysokość zostawały do wzięcia przez motyw — a reguła
   w rodzaju `.woocommerce-page input[type="number"]` ma wyższą specyficzność niż
   nasza pojedyncza klasa i domalowywała inputowi własne pudełko wewnątrz naszego.
   Dlatego wszystko, co rysuje ramkę, jest tu wygaszone twardo. */
.sc-pct__input,
.sc-pct input.sc-pct__input {
    width: 4.5em;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--sc-color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Strzałki w polu liczbowym: znikają. Patrz punkt 2 w nagłówku sekcji. */
.sc-pct__input::-webkit-outer-spin-button,
.sc-pct__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sc-pct__input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.sc-pct__input::placeholder {
    color: var(--sc-color-text-tertiary);
    font-weight: 400;
    font-size: 12px;
}

.sc-pct__suffix {
    flex: 0 0 auto;
    color: var(--sc-color-text-tertiary);
    font-size: 13px;
    font-weight: 600;
    user-select: none;
}

/* Slot na znacznik zapisu — stała szerokość, żeby tabela nie drgała. */
.sc-pct__state {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    flex: 0 0 14px;
    border-radius: var(--sc-radius-full);
    position: relative;
}

.sc-pct[data-state='busy'] .sc-pct__state {
    background: var(--sc-color-accent-soft);
    animation: sc-pct-pulse 1s ease-in-out infinite;
}

.sc-pct[data-state='ok'] .sc-pct__state {
    background: var(--sc-color-success-soft);
}

.sc-pct[data-state='ok'] .sc-pct__state::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--sc-color-success);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sc-pct[data-state='err'] {
    border-color: var(--sc-color-error);
}

.sc-pct[data-state='err'] .sc-pct__state {
    background: var(--sc-color-error-soft);
}

.sc-pct[data-state='err'] .sc-pct__state::after {
    content: '!';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-color-error);
    font-size: 11px;
    font-weight: 700;
}

@keyframes sc-pct-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

/* Pole dziedziczące stawkę (puste) — wizualnie spokojniejsze niż wypełnione. */
.sc-pct--auto .sc-pct__input:placeholder-shown {
    background: var(--sc-color-surface-subtle);
}

/* =============================================================================
   SKRZYNKA USTAWIEŃ PODATKÓW
   ============================================================================= */

.sc-tax-box {
    margin: 16px 0;
    padding: 18px 20px;
    background: var(--sc-color-surface);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-md);
}

.sc-tax-box[hidden] {
    display: none;
}

.sc-tax-box__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.sc-tax-box__head h4 {
    margin: 0;
    color: var(--sc-color-text);
}

.sc-tax-box__hint {
    margin: 0 0 16px;
    color: var(--sc-color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Komunikat autozapisu — obok nagłówka, nie jako toast, żeby nie zasłaniał
   pola, które się właśnie edytuje. */
.sc-tax-status {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--sc-radius-full);
    opacity: 0;
    transition: opacity .15s ease;
}

.sc-tax-status[data-kind] {
    opacity: 1;
}

.sc-tax-status[data-kind=''] {
    opacity: 0;
}

.sc-tax-status[data-kind='busy'] {
    background: var(--sc-color-info-soft);
    color: var(--sc-color-text-secondary);
}

.sc-tax-status[data-kind='ok'] {
    background: var(--sc-color-success-soft);
    color: var(--sc-color-success);
}

.sc-tax-status[data-kind='err'] {
    background: var(--sc-color-error-soft);
    color: var(--sc-color-error);
}

.sc-tax-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 28px;
}

.sc-tax-col h5 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-color-text-tertiary);
}

.sc-tax-col h5:not(:first-child) {
    margin-top: 22px;
}

.sc-tax-rates {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.sc-tax-rate {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-tax-rate__label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-surface);
    color: var(--sc-color-text);
    font-size: 14px;
}

.sc-tax-rate__label:focus {
    border-color: var(--sc-color-accent);
    box-shadow: 0 0 0 3px var(--sc-color-accent-soft);
    outline: 0;
}

.sc-tax-rate__del {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 18px;
    cursor: pointer;
    background: transparent;
    color: var(--sc-color-text-tertiary);
    border: 1px solid transparent;
    border-radius: var(--sc-radius-sm);
    transition: color .15s ease, background .15s ease;
}

.sc-tax-rate__del:hover {
    color: var(--sc-color-error);
    background: var(--sc-color-error-soft);
}

.sc-tax-field {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--sc-color-text-secondary);
}

.sc-tax-field small {
    display: block;
    margin-top: 6px;
    color: var(--sc-color-text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

.sc-vat-select {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-surface);
    color: var(--sc-color-text);
    font-size: 14px;
}

.sc-vat-select:focus {
    border-color: var(--sc-color-accent);
    box-shadow: 0 0 0 3px var(--sc-color-accent-soft);
    outline: 0;
}

/* Informacja, że nie ma przycisku „Zapisz" — bez niej brak przycisku wygląda
   jak brakująca funkcja, a nie jak decyzja. */
.sc-autosave-note {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: var(--sc-color-info-soft);
    border-radius: var(--sc-radius-sm);
    color: var(--sc-color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .sc-tax-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .sc-pct__input {
        width: 3.8em;
    }
}

/* Stan wysyłki SMS — pasek nad logiem SMS-ów. Kolory wyłącznie z tokenów
   instancji: salon ma własną paletę i „czerwony znikąd" wygląda jak błąd
   wtyczki, a nie jak ostrzeżenie salonu. */
.sc-sms-health {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--sc-radius-md);
    border-left: 4px solid var(--sc-color-border);
    background: var(--sc-color-surface-subtle);
    color: var(--sc-color-text);
    font-size: 14px;
    line-height: 1.5;
}

.sc-sms-health__meta {
    color: var(--sc-color-text-secondary);
    font-size: 13px;
}

.sc-sms-health--blocked {
    border-left-color: var(--sc-color-error);
    background: var(--sc-color-error-soft);
}

.sc-sms-health--low {
    border-left-color: var(--sc-color-warning);
    background: var(--sc-color-warning-soft);
}

.sc-sms-health--ok {
    border-left-color: var(--sc-color-success);
    background: var(--sc-color-success-soft);
}

.sc-sms-health--off,
.sc-sms-health--unknown {
    border-left-color: var(--sc-color-border);
}

/* Pasek kontaktu pod selectem klienta w oknie rezerwacji.
   Powód istnienia: etykiety select2 NIE DA SIĘ zaznaczyć — to <span> w widgetcie,
   a klik otwiera listę. Recepcja nie mogła skopiować numeru telefonu. Tutaj numer
   i e-mail są zwykłym, zaznaczalnym tekstem, do tego przycisk „kopiuj". */
.sc-client-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin: 6px 0 2px;
    font-size: 13px;
    line-height: 1.4;
}

.sc-cc-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sc-cc-k {
    color: var(--sc-color-text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sc-cc-v {
    color: var(--sc-color-text);
    font-weight: 600;
    text-decoration: none;
    /* Zaznaczalny — o to całe zamieszanie. */
    user-select: text;
    -webkit-user-select: text;
}

.sc-cc-v:hover {
    text-decoration: underline;
}

.sc-cc-copy {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding: 2px 8px;
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-surface);
    color: var(--sc-color-text-secondary);
    font: inherit;
    font-size: 11px;
    line-height: 1.6;
    transition: background var(--sc-transition-fast), border-color var(--sc-transition-fast), color var(--sc-transition-fast);
}

.sc-cc-copy:hover {
    background: var(--sc-color-accent-soft);
    border-color: var(--sc-color-accent);
    color: var(--sc-color-accent);
}

.sc-cc-copy.is-done {
    background: var(--sc-color-success-soft);
    border-color: var(--sc-color-success);
    color: var(--sc-color-success);
}

/* =============================================================================
   WARSTWA WSPÓLNYCH KOMPONENTÓW PANELU  (9.142)
   =============================================================================
   POWÓD POWSTANIA: panel miał tokeny (--sc-color-*, --sc-radius-*, --sc-shadow-*),
   ale NIE MIAŁ komponentów. Każda nowsza funkcja wymyślała własne (sc-tax-*,
   sc-sms-health, sc-cc-*), a starsze zakładki nie wymyśliły wcale — stały na
   rusztowaniu wp-admina (.wrap, .postbox, wp-list-table) i wyglądały jak WordPress
   z 2015, a nie jak ten panel.

   To jest ten brakujący poziom: karta, pasek narzędzi, pole, przycisk, tabela,
   odznaka, stan pusty, kafel liczby. Zakładki mają z tego składać widoki, zamiast
   wypisywać `style="color:#666"` w kilkunastu miejscach.

   ZASADA: zero nowych kolorów. Wszystko z tokenów, które już tu były.
   ============================================================================= */

/* --- strona zakładki --- */
.sc-page { display: flex; flex-direction: column; gap: 20px; }

.sc-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sc-page__title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--sc-color-text);
}

.sc-page__lead {
    margin: 0;
    max-width: 70ch;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sc-color-text-secondary);
}

/* --- karta --- */
.sc-card {
    background: var(--sc-color-surface);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-sm);
}

.sc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sc-color-border-subtle);
}

.sc-card__title { margin: 0; padding: 0; font-size: 14px; font-weight: 650; color: var(--sc-color-text); }
.sc-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-card__body { padding: 18px; }
.sc-card__body--flush { padding: 0; }

/* --- pasek narzędzi --- */
.sc-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sc-toolbar--pad { padding: 18px 18px 0; }
.sc-toolbar__spacer { flex: 1 1 auto; }

/* --- pole formularza --- */
.sc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc-field--grow { flex: 1 1 220px; }

.sc-field__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sc-color-text-tertiary);
}

.sc-field__hint { font-size: 12px; line-height: 1.5; color: var(--sc-color-text-tertiary); }

/* Motyw salonu potrafi ostro stylować pola (ta sama lekcja co przy .sc-pct) —
   dlatego wymiary i tło mówimy wprost, a nie liczymy na dziedziczenie. */
.sc-field input[type="text"],
.sc-field input[type="number"],
.sc-field input[type="date"],
.sc-field input[type="search"],
.sc-field select {
    box-sizing: border-box;
    width: 100%;
    height: 38px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid var(--sc-color-border) !important;
    border-radius: var(--sc-radius-md) !important;
    background: var(--sc-color-surface) !important;
    color: var(--sc-color-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none !important;
    outline: 0;
    transition: border-color var(--sc-transition-fast), box-shadow var(--sc-transition-fast);
}

.sc-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 84px;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid var(--sc-color-border) !important;
    border-radius: var(--sc-radius-md) !important;
    background: var(--sc-color-surface) !important;
    color: var(--sc-color-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none !important;
    outline: 0;
    resize: vertical;
}

.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus {
    border-color: var(--sc-color-accent) !important;
    box-shadow: 0 0 0 3px var(--sc-color-accent-soft) !important;
}

/* --- przycisk --- */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    height: 38px;
    padding: 0 16px;
    cursor: pointer;
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface);
    color: var(--sc-color-text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--sc-transition-fast), border-color var(--sc-transition-fast),
                color var(--sc-transition-fast), transform var(--sc-transition-fast), box-shadow var(--sc-transition-fast);
}

.sc-btn:hover { background: var(--sc-color-surface-subtle); transform: translateY(-1px); box-shadow: var(--sc-shadow-sm); }
.sc-btn:active { transform: translateY(0); box-shadow: none; }
.sc-btn:focus-visible { outline: 2px solid var(--sc-color-accent); outline-offset: 2px; }
.sc-btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.sc-btn--primary { background: var(--sc-color-accent); border-color: var(--sc-color-accent); color: var(--sc-color-on-accent); }
.sc-btn--primary:hover { background: var(--sc-color-accent); filter: brightness(1.07); color: var(--sc-color-on-accent); }
.sc-btn--ghost { border-color: transparent; background: transparent; color: var(--sc-color-text-secondary); }
.sc-btn--ghost:hover { background: var(--sc-color-surface-subtle); color: var(--sc-color-text); }
.sc-btn--danger:hover { border-color: var(--sc-color-error); background: var(--sc-color-error-soft); color: var(--sc-color-error); }
.sc-btn--sm { height: 30px; padding: 0 11px; font-size: 12.5px; }

/* --- tabela --- */
.sc-table-wrap { overflow-x: auto; }

.sc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.sc-table th {
    text-align: left;
    padding: 11px 16px;
    background: var(--sc-color-surface-subtle);
    border-bottom: 1px solid var(--sc-color-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sc-color-text-tertiary);
    white-space: nowrap;
}

.sc-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--sc-color-border-subtle);
    color: var(--sc-color-text);
    vertical-align: middle;
}

.sc-table tbody tr { transition: background var(--sc-transition-fast); }
.sc-table tbody tr:hover { background: var(--sc-color-surface-subtle); }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-table__strong { font-weight: 650; }
.sc-table__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--sc-color-text-tertiary); }
.sc-table__actions { display: flex; gap: 6px; justify-content: flex-end; }

/* --- odznaka statusu --- */
.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--sc-radius-full);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}

.sc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sc-badge--ok { background: var(--sc-color-success-soft); color: var(--sc-color-success); }
.sc-badge--warn { background: var(--sc-color-warning-soft); color: var(--sc-color-warning); }
.sc-badge--err { background: var(--sc-color-error-soft); color: var(--sc-color-error); }
.sc-badge--info { background: var(--sc-color-info-soft); color: var(--sc-color-info); }
.sc-badge--mute { background: var(--sc-color-surface-subtle); color: var(--sc-color-text-tertiary); }

/* --- stan pusty --- */
.sc-empty { padding: 44px 24px; text-align: center; color: var(--sc-color-text-secondary); }
.sc-empty__title { margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--sc-color-text); }
.sc-empty__text { margin: 0 auto; max-width: 46ch; font-size: 13.5px; line-height: 1.55; }
.sc-empty--error .sc-empty__title { color: var(--sc-color-error); }

/* --- kafel liczby --- */
.sc-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.sc-stat {
    padding: 14px 16px;
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
}

.sc-stat__k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-color-text-tertiary); }
.sc-stat__v { margin-top: 5px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--sc-color-text); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .sc-page__title { font-size: 19px; }
    .sc-card__body { padding: 14px; }
    .sc-toolbar--pad { padding: 14px 14px 0; }
    .sc-table th, .sc-table td { padding: 10px 12px; }
}

/* --- DataTables w skórce panelu -----------------------------------------
   Log SMS jedzie na DataTables, która dokłada własny wrapper, wyszukiwarkę
   i stronicowanie. Bez tego kawałka tabela byłaby w nowej skórce, a sterowanie
   wokół niej dalej wyglądałoby jak wp-admin. */
.sc-card .dataTables_wrapper { padding: 14px 18px 18px; }

.sc-card .dataTables_filter,
.sc-card .dataTables_length { margin-bottom: 12px; }

.sc-card .dataTables_filter label,
.sc-card .dataTables_length label,
.sc-card .dataTables_info {
    font-size: 12.5px;
    color: var(--sc-color-text-secondary);
}

.sc-card .dataTables_filter input,
.sc-card .dataTables_length select {
    box-sizing: border-box;
    height: 34px !important;
    margin-left: 8px !important;
    padding: 0 10px !important;
    border: 1px solid var(--sc-color-border) !important;
    border-radius: var(--sc-radius-md) !important;
    background: var(--sc-color-surface) !important;
    color: var(--sc-color-text);
    font: inherit;
    font-size: 13.5px;
    box-shadow: none !important;
}

.sc-card .dataTables_filter input:focus,
.sc-card .dataTables_length select:focus {
    border-color: var(--sc-color-accent) !important;
    box-shadow: 0 0 0 3px var(--sc-color-accent-soft) !important;
    outline: 0;
}

.sc-card .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    margin: 0 2px !important;
    padding: 0 10px !important;
    border: 1px solid var(--sc-color-border) !important;
    border-radius: var(--sc-radius-md) !important;
    background: var(--sc-color-surface) !important;
    color: var(--sc-color-text-secondary) !important;
    font-size: 13px;
    line-height: 32px;
    cursor: pointer;
    transition: background var(--sc-transition-fast), color var(--sc-transition-fast), border-color var(--sc-transition-fast);
}

.sc-card .dataTables_paginate .paginate_button:hover {
    background: var(--sc-color-surface-subtle) !important;
    color: var(--sc-color-text) !important;
}

.sc-card .dataTables_paginate .paginate_button.current {
    background: var(--sc-color-accent) !important;
    border-color: var(--sc-color-accent) !important;
    color: var(--sc-color-on-accent) !important;
}

.sc-card .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: default;
}

/* Sortowanie: strzałki DataTables kolidują z naszym nagłówkiem — zostawiamy miejsce. */
.sc-card table.sc-table thead th.sorting,
.sc-card table.sc-table thead th.sorting_asc,
.sc-card table.sc-table thead th.sorting_desc { padding-right: 26px; cursor: pointer; }

/* Pas bezpieczeństwa na szerokość tabeli w DataTables.
   Biblioteka wpisuje szerokość INLINE, a styl inline bije każdą regułę z arkusza —
   jedyne, co go pokonuje, to `!important` autora. Zgłoszone: `#sms-log-table`
   dostawał `width: 0px` (pomiar w ukrytej zakładce) i wiersz zwijał się do zera.
   Właściwa naprawa siedzi w konfiguracji (`autoWidth: false`); to jest zabezpieczenie
   na wypadek, gdyby inna tabela panelu też trafiła kiedyś na tę ścieżkę. */
table.sc-table {
    width: 100% !important;
    min-width: 100%;
}

/* --- Blacklista: karta w oknie klienta ---
   Kolory wyłącznie z tokenów --sc-*: panel dziedziczy paletę instancji, a zaszyty
   kolor byłby „stylem znikąd" na salonie o innej identyfikacji. */
.sc-blacklist-card {
    margin-top: 16px;
}

.sc-blacklist-card--on {
    border-left: 3px solid var(--sc-color-error);
    background: var(--sc-color-error-soft);
}

.sc-blacklist-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sc-blacklist-card__form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-blacklist-card__form .sc-blacklist-reason {
    flex: 1;
    min-width: 220px;
}

.sc-blacklist-card__meta {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sc-color-text-secondary);
}

.blacklist-section .description code {
    font-size: 12px;
}

/* --- Menadżer Powiadomień ---
   Karta reguły ma się czytać jak zdanie: „kiedy — czym — czym dokładnie".
   Kolory wyłącznie z tokenów --sc-*, jak reszta panelu. */
.sc-notify-rule {
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.sc-notify-rule__head,
.sc-notify-rule__when,
.sc-notify-rule__kanaly {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sc-notify-rule__kanaly {
    gap: 18px;
}

.sc-notify-rule__pole {
    display: block;
    margin-top: 6px;
}

.notify-sms-licznik {
    margin-top: 4px;
}

.sc-notify-preview {
    border-left: 3px solid var(--sc-color-info);
    background: var(--sc-color-info-soft);
    border-radius: var(--sc-radius-md);
    padding: 10px 12px;
}

#powiadomienia-content .graybox h3 {
    margin-bottom: 6px;
}

/* Akcje w nagłówku strony — .sc-page__head jest już flexem ze space-between,
   brakowało tylko szeregowania samych przycisków po prawej. */
.sc-page__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}