/* =====================================
   NOWOCZESNE STYLE
   DBAj O ZGODNOŚć z WCAG 2.1
   ===================================== */

:root {
    /* Design System - Financial App Colors
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-900: #1e3a8a;*/

    /* Status Colors - Financial Grade */
    --success-50: #f0fdf4;
    --success-300: #10dc5e;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --warning-50: #fffbeb;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --danger-50: #fef2f2;
    --danger-300: #f44336;
    --danger-500: #ef4444;
    --danger-600: #dc2626;


    /* Design System - Harmonized with #293040 */
    --header-primary: #293040;
    --primary-50: #f1f3f6;
    --primary-100: #e3e7ed;
    --primary-200: #c1cad6;
    --primary-300: #9fadbf;
    --primary-400: #5b7091;
    --primary-500: #293040; /* Główny kolor z headera */
    --primary-600: #242a37;
    --primary-700: #1f242e;
    --primary-800: #1a1e26;
    --primary-900: #15181d;

    /* Neutral Colors - Warm var(--neutral-25)s and grays */
    --neutral-25: #fefefe;
    --neutral-50: #fafbfc;
    --neutral-100: #f1f3f6;
    --neutral-200: #e5e9f0;
    --neutral-300: #d1d9e0;
    --neutral-400: #9aa4b2;
    --neutral-500: #6b7684;
    --neutral-600: #4a5568;
    --neutral-700: #2d3748;
    --neutral-800: #1a202c;
    --neutral-900: #171923;

    /* Status Colors - WCAG 2.1 Compliant */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-500: #06d6a0; /* Zachowany kolor edycji */
    --success-600: #059669;
    --success-700: #047857;

    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-500: #ef476f; /* Zachowany kolor usuwania */
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    /* Info Colors - Harmonized with primary */
    --info-50: #f0f4f8;
    --info-100: #d9e2ec;
    --info-500: #4a90a4;
    --info-600: #2d5aa0;
    --info-700: #1e3a8a;

    /* Neutralne */
    --gray-100: #F8F9FA;
    --gray-200: #E9ECEF;
    --gray-600: #6C757D;
    --gray-800: #343A40;

    --wild-sand-50: #f6f6f6;
    --wild-sand-100: #efefef;
    --wild-sand-200: #dcdcdc;
    --wild-sand-300: #bdbdbd;
    --wild-sand-400: #989898;
    --wild-sand-500: #7c7c7c;
    --wild-sand-600: #656565;
    --wild-sand-700: #525252;
    --wild-sand-800: #464646;
    --wild-sand-900: #3d3d3d;
    --wild-sand-950: #292929;

    /* Neonowe żarówiaste indigo */
    --neon-indigo-50: #f2f0ff;
    --neon-indigo-100: #e3dfff;
    --neon-indigo-200: #cbc3ff;
    --neon-indigo-300: #b3a7ff; /* Jasny neon */
    --neon-indigo-400: #9b8bff;
    --neon-indigo-500: #836fff; /* Intensywny neon indigo */
    --neon-indigo-600: #6b53ff;
    --neon-indigo-700: #5337ff;
    --neon-indigo-800: #3b1bff;
    --neon-indigo-900: #2300ff; /* Czysty niebieski neon */

    /* Neonowy fluorescencyjny różowy */
    --neon-pink-50: #fff0f7;
    --neon-pink-100: #ffd6e8;
    --neon-pink-200: #ffb8d9;
    --neon-pink-300: #ff9aca;
    --neon-pink-400: #ff7cbb;
    --neon-pink-500: #ff5eac; /* Intensywny neon różowy */
    --neon-pink-600: #ff409d;
    --neon-pink-700: #ff228e;
    --neon-pink-800: #ff047f;
    --neon-pink-900: #e60070;

    /* Typography Scale */
    --text-xs: 0.575rem;
    --text-xsm: 0.675rem;
    --text-sm: 0.775rem; /* 0.875rem; */
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Shadows - Subtle Financial App Style */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Animation */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-padding: 10px 15px;
    --font-size-small: 0.775rem;
    scroll-behavior: smooth;
    /* Focus outline */
    --focus-color: #2563eb;
}


/* =====================================
   GLOBAL STYLES
   ===================================== */

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--neutral-700);
    background-color: var(--wild-sand-50);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    padding: var(--space-1);
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
    margin-bottom: 10px;
}

.pagetitle h1 {
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 400;
    color: #012970;
}

/* Light Backgrounds */
.bg-primary-light {
    background-color: #cfe2ff;
    border-color: #cfe2ff;
}

.bg-secondary-light {
    background-color: #e2e3e5;
    border-color: #e2e3e5;
}

.bg-success-light {
    background-color: #d1e7dd;
    border-color: #d1e7dd;
}

.bg-danger-light {
    background-color: #f8d7da;
    border-color: #f8d7da;
}

.bg-warning-light {
    background-color: #fff3cd;
    border-color: #fff3cd;
}

.bg-info-light {
    background-color: #cff4fc;
    border-color: #cff4fc;
}

.bg-dark-light {
    background-color: #d3d3d4;
    border-color: #d3d3d4;
}

/* Alerts --bs-alert-bg: transparent;*/
.alert {
    --bs-alert-padding-x: 0.75rem;
    --bs-alert-padding-y: 0.5rem;
    --bs-alert-margin-bottom: 0.5rem;
    --bs-toast-spacing: 1.5rem;
    --bs-toast-max-width: 350px;
    --bs-toast-font-size: 0.875rem;
}

.alert-heading {
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
}

.alert-success {
    background-color: #a1d97d;
}

.alert-info {
    background-color: #3489d5;
}

.alert-warning {
    background-color: #c46f39;
}

.alert-danger {
    background-color: #d33850;
}

/* Close Button */
.btn-close {
    background-size: 25%;
}

.btn-close:focus {
    outline: 0;
    box-shadow: none;
}

/* Accordion */
.accordion-item {
    border: 1px solid #ebeef4;
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #012970;
    background-color: #EAEAEAFF;
}

.accordion-flush .accordion-button {
    padding: 15px 0;
    background: none;
    border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: #4154f1;
}

.accordion-flush .accordion-body {
    padding: 0 0 15px 0;
    color: #3e4f6f;
    font-size: var(--font-size-small);
}

/* Breadcrumbs */
.breadcrumb {
    font-size: var(--font-size-small);
    font-family: "Roboto", sans-serif;
    color: #899bbd;
    font-weight: 400;
}

.breadcrumb a {
    color: #899bbd;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
    color: #899bbd;
}

.breadcrumb .active {
    color: #51678f;
    font-weight: 400;
}

/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
    margin-bottom: -2px;
    border: none;
    color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: #4154f1;
}

.nav-tabs-bordered .nav-link.active {
    background-color: #EAEAEAFF;
    color: #4154f1;
    border-bottom: 2px solid #4154f1;
}

/* Dla strony głównej bez sidebara */
body.toggle-sidebar #main,
body.toggle-sidebar #footer {
    margin-left: 50px;
    margin-right: 50px;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    margin-top: 50px;
    padding: var(--space-2) var(--space-1);
    transition: all 0.3s;
}

@media (max-width: 1200px) {
    #main {
        padding: var(--space-2);
    }
}

@media (min-width: 1200px) {

    #main,
    #footer {
        margin-left: 290px;
    }
}

@media (max-width: 1200px) {
    .toggle-sidebar .sidebar {
        left: 0;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0;
    }

    .toggle-sidebar .sidebar {
        left: -290px;
    }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
    line-height: 1;
}

@media (min-width: 1200px) {
    .logo {
        width: 280px;
    }
}

.logo img {
    /*  max-height: 26px; */
    max-height: 80px;
    margin-right: 6px;
}

.logo span {
    font-size: 26px;
    font-weight: 500;
    color: #012970;
    font-family: "Roboto", sans-serif;
}

/* =====================================
   MODERN HEADER
   ===================================== */
/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
}

.header-nav > ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #012970;
    margin-right: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: #012970;
}

.header-nav .nav-profile img {
    max-height: 36px;
}

.header-nav .nav-profile span {
    font-size: var(--font-size-small);
    font-weight: 400;
}

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
}

.header-nav .notifications {
    inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .notifications .notification-item i {
    margin: 0 20px 0 10px;
    font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
    font-size: var(--font-size-small);
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .notifications .notification-item:hover {
    background-color: #e1e1e1;
}

.header-nav .messages {
    inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .messages .message-item a {
    display: flex;
}

.header-nav .messages .message-item img {
    margin: 0 20px 0 10px;
    max-height: 40px;
}

.header-nav .messages .message-item h4 {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 5px;
    color: #e1e1e1;
}

.header-nav .messages .message-item p {
    font-size: var(--font-size-small);
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .messages .message-item:hover {
    background-color: #e1e1e1;
}

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 400;
    color: #e1e1e1;
}

.header-nav .profile .dropdown-header span {
    font-size: var(--font-size-small);
}

.header-nav .profile .dropdown-item {
    font-size: var(--font-size-small);
    padding: 10px 15px;
    transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
    background-color: #e1e1e1;
}

.header {
    z-index: 997;
    height: 60px;
    padding-left: 20px;
    background-color: var(--primary-500);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.header .logo img {
    transition: transform var(--transition-fast);
}

.header .logo:hover img {
    transform: scale(1.02);
}

/* Modern Top Bar */
.top-bar {
    background-color: #293040;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--neutral-100);
}

.header-text {
    color: #f8fafc;
    font-size: var(--text-sm);
    /*font-weight: 500;*/
}

.header .toggle-sidebar-btn {
    font-size: 32px;
    padding-left: 10px;
    cursor: pointer;
    color: #e1e1e1; /* #012970; */
}

.header .search-bar {
    min-width: 360px;
    padding: 0 20px;
}

@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: var(--space-2);
        box-shadow: 0 0 15px 0 rgba(1, 41, 112, 0.1);
        background: var(--neutral-25);
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

.header .search-form input {
    font-size: var(--font-size-small);
    color: #012970;
    border: 1px solid rgba(1, 41, 112, 0.2);
    padding: 7px 38px 7px 8px;
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
    outline: none;
    box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
    border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
    border: 0;
    padding: 0;
    margin-left: -30px;
    background: none;
}

.header .search-form button i {
    color: #012970;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    padding: 20px 0;
    font-size: var(--font-size-small);
    transition: all 0.3s;
    border-top: 1px solid #cddfff;
}

.footer .copyright {
    text-align: center;
    color: #012970;
}

.footer .credits {
    padding-top: 5px;
    text-align: center;
    font-size: var(--font-size-small);
    color: #012970;
}

/* =====================================
   MODERN SIDEBAR — zoptymalizowana wersja
   ===================================== */

.sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 996;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    border-right: 1px solid var(--sidebar-border);
    background-color: var(--wild-sand-50);
    box-shadow: var(--shadow-sm);
    width: 280px;
    transition: all var(--transition-normal);
    font-size: var(--text-sm);
    padding: var(--space-2);
}

/* Scrollbar dla WebKit */
.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #e1e1e1;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

/* Nawigacja w sidebarze */
.sidebar-nav {
    padding: var(--space-2);
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-item {
    margin-bottom: var(--space-1);
}

.sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #899bbd;
    font-weight: 400;
    margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    color: var(--neutral-600);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.sidebar-nav .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--primary-500);
    transform: scaleY(0);
    transition: transform var(--transition-fast);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    background: var(--primary-50);
    color: var(--primary-700);
    transform: translateX(0.75%);
}

.sidebar-nav .nav-link:hover::before,
.sidebar-nav .nav-link.active::before {
    transform: scaleY(1);
}

.sidebar-nav .nav-link i {
    margin-right: var(--space-3);
    font-size: var(--text-base);
    width: 20px;
    text-align: center;
}

/* Kolory i zachowanie po zwinięciu („collapsed”) */
.sidebar-nav .nav-link.collapsed {
    color: #012970;
    background: #EAEAEAFF;
}

.sidebar-nav .nav-link.collapsed i {
    color: #899bbd;
}

.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link:hover {
    background-color: rgba(11, 61, 145, 0.1);
    color: var(--primary-500);
}

.sidebar-nav .nav-link:hover i {
    color: #4154f1;
}

.sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 10px;
    transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

/* Podmenu (.nav-content) */
.sidebar-nav .nav-content {
    padding-left: 12px;
    margin-top: 4px;
    list-style: none;
}

.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 400;
    color: #012970;
    transition: 0.3s;
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    text-decoration: none;
}

.sidebar-nav .nav-content a i {
    font-size: var(--text-sm);
    margin-right: 8px;
    line-height: 0;
    border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: #4154f1;
    padding: var(--space-2) var(--space-2);
}

.sidebar-nav .nav-content a.active i {
    background-color: transparent;
    color: #4154f1;
}

/* Nested Navigation */
.nav-content {
    margin-left: var(--space-6);
    border-left: 2px solid var(--neutral-100);
    padding-left: var(--space-4);
}

.nav-content .nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

/* =====================================
   MODERN CARDS
   ===================================== */

.card {
    margin-bottom: 30px;
    border: none;
    background: var(--neutral-25);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    padding: var(--space-4);
}

.card:hover {
    background-color: var(--gray-100);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.card-header,
.card-footer {

    border-color: #ebeef4;
    background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-600) 100%);
    border-bottom: 1px solid var(--neutral-200);
    padding: var(--space-4);
    position: relative;
    color: var(--wild-sand-50);
    font-size: var(--text-base);
}

.card-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-300));
    border-radius: 1px;

}

.card-title {
    padding: 5px 0 10px 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--wild-sand-50);
    margin: 0;
}

.card-title span {
    font-size: var(--font-size-small);
    font-weight: 600;
}

.card-body {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15) !important;
    background-color: var(--wild-sand-100) !important;
    padding: var(--space-4);
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

/* ================
   RESPONSYWNOŚĆ
   ================
@media (max-width: 991.98px) {
    .sidebar {
        width: 100%;
        position: relative;
    }

    #main {
        margin-left: 0 !important;
    }
}
*/
/* =====================================
   MODERN BUTTONS
   ===================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1px solid;
    transition: all var(--transition-fast);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-normal);
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: var(--neutral-25);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    border-color: var(--primary-500);
    color: var(--primary-600);
    background: var(--neutral-25);
}

.btn-outline-primary:hover {
    background: var(--primary-500);
    color: var(--neutral-25);
    transform: translateY(-1px);
}

.btn-outline-primary-danger {
    color: var(--primary-600);
    background: var(--neutral-25);
}

.btn-outline-primary-danger:hover {
    background: var(--danger-600);
    color: var(--neutral-25);
    border-color: var(--primary-500) !important;
    transform: translateY(-1px);
}

.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

/* Ripple effect for buttons */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
}

.btn-link:hover {
    border: #0d6efd 1px solid;
    color: var(--neutral-25);
    transform: translateY(-1px);
}

.btn-outline-pink {
    border-color: var(--primary-500);
    color: var(--primary-600);
    background: var(--neutral-25);
}

.btn-outline-pink:hover {
    background: var(--primary-600);
    color: var(--neutral-25);
    border-color: var(--neon-pink-500);
    transform: translateY(-1px);
}

/* =====================================
   MODERN TABLE
   ===================================== */

.table-container {
    background: var(--neutral-25);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table {
    margin: 0;
    font-size: var(--text-sm);
    background: var(--gray-200);
}

.table thead th {
    /*background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);*/
    /*border-bottom: 2px solid var(--neutral-200);*/
    /*background: var(--primary-400) !important;*/
    background: var(--neutral-700) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: var(--text-xsm) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3);
    position: sticky;
    top: 0;
    z-index: 10;
}

.table tbody tr {
    transition: all var(--transition-fast);
    /*border-bottom: 1px solid var(--neutral-100);*/
}

.table tbody tr:hover {
    background: var(--primary-50);
    transform: scale(1.0);
}

.table tbody td {
    padding: var(--space-3);
    /*border-bottom: 1px solid var(--neutral-100);*/
}

/* =====================================
   MODERN BADGES
   ===================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
}

.badge-success {
    background: var(--success-50);
    color: var(--success-600);
    border-color: var(--success-200);
}

.badge-warning,
.badge-progress {
    background: var(--warning-50);
    color: var(--warning-600);
    border-color: var(--warning-200);
}

.badge-warning-light {
    background-color: var(--warning-200);
    color: var(--warning-700);
    border-color: var(--warning-600);
}

.badge-primary-400 {
    background-color: var(--primary-200);
    color: var(--primary-700);
    border-color: var(--primary-600);
}

.badge-danger-500,
.badge-progress {
    background: var(--danger-200);
    color: var(--danger-700);
    border-color: var(--danger-500);
}

.badge-info {
    background-color: var(--info-700);
    color: var(--info-100);
    border-color: var(--info-500);
}

.badge-secondary {
    background: var(--gray-100);
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.badge-danger {
    background: var(--danger-50);
    color: var(--danger-600);
    border-color: var(--danger-200);
}

.badge-critical {
    background: linear-gradient(135deg, var(--danger-50) 0%, var(--danger-100) 100%);
    /*    color: var(--danger-700); */
    color: #EF476F;
    border-color: var(--danger-300);
    font-weight: 600;
}

.badge-non-critical {
    background: linear-gradient(135deg, var(--success-50) 0%, var(--success-100) 100%);
    /*  color: var(--success-700); */
    color: #06D6A0;
    border-color: var(--success-300);
    font-weight: 600;
}

/* Pastelowe kolory dla badge'ów z borderami */
.badge-pastel-blue {
    background-color: #a7d0e8;
    color: #2c3e50;
    border: 1px solid #7fb0d4;
}

.badge-pastel-pink {
    background-color: #f8c8dc;
    color: #8e44ad;
    border: 1px solid #e9a8c5;
}

.badge-pastel-green {
    background-color: #c9e9c9;
    color: #27ae60;
    border: 1px solid #a8d9a8;
}

.badge-pastel-lavender {
    background-color: #d6d1f5;
    color: #8e44ad;
    border: 1px solid #b9b2e6;
}

.badge-pastel-peach {
    background-color: #f9d6c1;
    color: #d35400;
    border: 1px solid #f2b999;
}

.badge-pastel-mint {
    background-color: #b8e8d3;
    color: #16a085;
    border: 1px solid #97d4bb;
}

.badge-pastel-yellow {
    background-color: #faf0b8;
    color: #f39c12;
    border: 1px solid #f5e18d;
}

.badge-pastel-lilac {
    background-color: #e3d0f7;
    color: #9b59b6;
    border: 1px solid #d0b2f0;
}

.badge-pastel-coral {
    background-color: #f5c8c4;
    color: #e74c3c;
    border: 1px solid #eea9a3;
}

.badge-pastel-aqua {
    background-color: #c2edee;
    color: #3498db;
    border: 1px solid #9ad8da;
}

/* Efekty hover */
.badge-pastel-blue:hover {
    background-color: #95c4e0;
    border-color: #5a95c0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-pink:hover {
    background-color: #f4b4d0;
    border-color: #d98bab;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-green:hover {
    background-color: #b0dfb0;
    border-color: #85c285;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-lavender:hover {
    background-color: #c6bee9;
    border-color: #9f94d9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-peach:hover {
    background-color: #f6c4a7;
    border-color: #e99e78;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-mint:hover {
    background-color: #a3dfc6;
    border-color: #74c4a2;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-yellow:hover {
    background-color: #f7e89c;
    border-color: #f0d766;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-lilac:hover {
    background-color: #d5bdf2;
    border-color: #b894e6;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-coral:hover {
    background-color: #f0b1ab;
    border-color: #e78c84;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.badge-pastel-aqua:hover {
    background-color: #a6e0e2;
    border-color: #75c6c9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =====================================
   MODERN ICONS
   ===================================== */
.icon-edit {
    color: #06D6A0;
    border: none;
}

.icon-edit:hover {
    color: #048a67;
}

.icon-delete {
    color: #EF476F;
    border: none;
}

.icon-delete:hover {
    color: #d1204c;
}

.icon-info-light {
    color: #4154f1;
}

/* ================
   10. RISK LEVELS - poprawa kontrastu
   ================ */
.low-risk {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.medium-risk {
    background-color: #F9A602;
    color: #000000;
}

.high-risk {
    background-color: #D32F2F;
    color: #FFFFFF;
}

.very-high-risk {
    background-color: #B71C1C;
    color: #FFFFFF;
}

.low-risk {
    background-color: rgb(46, 202, 106); /* #64DD17FF; */
    color: var(--neutral-25);
}

.medium-risk {
    background-color: #FFFF00; /* żółty */
    color: black;
}

.high-risk {
    background-color: #F57C00FF;
    color: var(--neutral-25);
}

.very-high-risk {
    background-color: #dc3545;
    color: var(--neutral-25);
}

.risk-level-text {
    padding: 0 10px; /* dostosuj wartości paddingu do preferencji */
    border-radius: 20px; /* zaokrąglenie rogów */
    display: inline-block; /* aby zaokrąglone tło obejmowało tylko tekst */
    width: auto; /* szerokość tła */
    height: 20px; /* wysokość tła */
    text-align: center; /* wyśrodkowanie tekstu */
}

/* =====================================
   MODERN FORMS
   ===================================== */

.form-control,
.form-select {
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    background: var(--neutral-25);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.form-label {
    font-weight: 500;
    color: var(--neutral-700);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
}

/* =====================================
   MODERN MODAL
   ===================================== */

.modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-600) 100%);
    border-bottom: 1px solid var(--neutral-200);
    padding: var(--space-4);
    color: var(--neutral-25);
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--neutral-25);
}

.modal-body {
    padding: var(--space-4);
}

.modal-footer {
    background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-600) 100%);
    border-top: 1px solid var(--neutral-200);
    padding: var(--space-3);
    color: var(--neutral-25);
}

/* =====================================
   MODERN ICONS
   ===================================== */

.icon-edit {
    color: var(--success-500);
    transition: all var(--transition-fast);
}

.icon-edit:hover {
    color: var(--success-600);
    transform: scale(1.1);
}

.icon-delete {
    color: var(--danger-500);
    transition: all var(--transition-fast);
}

.icon-delete:hover {
    color: var(--danger-600);
    transform: scale(1.1);
}

/* =====================================
   MODERN FILTERS
   ===================================== */

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    background: var(--primary-100);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid var(--primary-200);
}

.filter-tag .btn-close {
    margin-left: var(--space-2);
    font-size: 10px;
}

.tag-filter.active {
    border: 2px solid #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.tag-filter:hover {
    cursor: pointer;
    opacity: 0.9;
}

/* =====================================
   RESPONSIVE DESIGN
   ===================================== */

@media (max-width: 991.98px) {
    .sidebar {
        width: 100%;
        position: relative;
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .table-responsive {
        border-radius: var(--radius-md);
    }
}

/* =====================================
   ACCESSIBILITY IMPROVEMENTS
   ===================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus indicators */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* High contrast mode support -- było high */
@media (prefers-contrast: more) {
    :root {
        --neutral-200: #000000;
        --neutral-700: #000000;
        --primary-500: #0000ff;
    }
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
    position: absolute;
    right: 0;
    top: 15px;
}

.dashboard .filter .icon {
    color: #aab7cf;
    padding-right: 20px;
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 1rem;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
    color: #4154f1;
}

.dashboard .filter .dropdown-header {
    padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
    text-transform: uppercase;
    font-size: var(--font-size-small);
    font-weight: 400;
    letter-spacing: 1px;
    color: #aab7cf;
    margin-bottom: 0;
    padding: 0;
}

.dashboard .filter .dropdown-item {
    padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
    padding-bottom: 10px;
}

.dashboard .info-card h6 {
    font-size: 28px;
    color: #012970;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.dashboard .card-icon {
    font-size: 32px;
    line-height: 0;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    flex-grow: 0;
}

.dashboard .sales-card .card-icon {
    color: #4154f1;
    background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
    color: #2eca6a;
    background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
    color: #ff771d;
    background: #ffecdf;
}

/* Activity */
.dashboard .activity {
    font-size: var(--font-size-small);
}

.dashboard .activity .activity-item .activite-label {
    color: #888;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
    content: "";
    position: absolute;
    right: -11px;
    width: 4px;
    top: 0;
    bottom: 0;
    background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
    margin-top: 3px;
    z-index: 1;
    font-size: 11px;
    line-height: 0;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid #EAEAEAFF;
    flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
    padding-left: 10px;
    padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
    top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
    padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item + .post-item {
    margin-top: 15px;
}

.dashboard .news img {
    width: 80px;
    float: left;
    border-radius: 5px;
}

.dashboard .news h4 {
    font-size: var(--font-size-small);
    margin-left: 95px;
    font-weight: bold;
    margin-bottom: 5px;
}

.dashboard .news h4 a {
    color: #012970;
    transition: 0.3s;
}

.dashboard .news h4 a:hover {
    color: #4154f1;
}

.dashboard .news p {
    font-size: var(--font-size-small);
    color: #777777;
    margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
    font-size: var(--font-size-small);
}

.dashboard .recent-sales .table thead {
    background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
    border: 0;
}

.dashboard .recent-sales .dataTable-top {
    padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
    padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
    font-size: var(--font-size-small);
}

.dashboard .top-selling .table thead {
    background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
    border: 0;
}

.dashboard .top-selling .table tbody td {
    vertical-align: middle;
}

.dashboard .top-selling img {
    border-radius: 5px;
    max-width: 60px;
}

/* =====================================
   LOADING STATES
   ===================================== */

.loading-skeleton {
    background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

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

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
    display: grid;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding-top: 15px;
}

.iconslist .icon {
    background-color: #EAEAEAFF;
    border-radius: 0.25rem;
    text-align: center;
    color: #012970;
    padding: 15px 0;
}

.iconslist i {
    margin: 0.25rem;
    font-size: 2.5rem;
}

.iconslist .label {
    font-family: var(--bs-font-monospace);
    display: inline-block;
    width: 100%;
    overflow: hidden;
    padding: 0.25rem;
    font-size: 12px;
    text-overflow: ellipsis;
var(--neutral-25) -space: nowrap;
    color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
    max-width: 120px;
}

.profile .profile-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2c384e;
    margin: 10px 0 0 0;
}

.profile .profile-card h3 {
    font-size: 18px;
}

.profile .profile-card .social-links a {
    font-size: 20px;
    display: inline-block;
    color: rgba(1, 41, 112, 0.5);
    line-height: 0;
    margin-right: 10px;
    transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
    color: #012970;
}

.profile .profile-overview .row {
    margin-bottom: 20px;
    font-size: var(--font-size-small);
}

.profile .profile-overview .card-title {
    color: #012970;
}

.profile .profile-overview .label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
    max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
    font-size: 18px;
    font-weight: 600;
    color: #4154f1;
}

.faq .basic p {
    color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    padding: 28px 30px;
}

.contact .info-box i {
    font-size: 38px;
    line-height: 0;
    color: #4154f1;
}

.contact .info-box h3 {
    font-size: 20px;
    color: #012970;
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: var(--font-size-small);
    margin-bottom: 0;
}

.contact .php-email-form .error-message {
    display: none;
    color: #e1e1e1;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #e1e1e1;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #EAEAEAFF;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: var(--font-size-small);
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: #4154f1;
}

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
    background: #4154f1;
    border: 0;
    padding: 10px 30px;
    color: #e1e1e1;
    transition: 0.4s;
    border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
    background: #5969f3;
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
    padding: 30px;
}

.error-404 h1 {
    font-size: 180px;
    font-weight: 700;
    color: #4154f1;
    margin-bottom: 0;
    line-height: 150px;
}

.error-404 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #012970;
    margin-bottom: 30px;
}

.error-404 {
    background: #51678f;
    color: #e1e1e1;
    padding: 8px 30px;
}

.error-404 {
    background: #3e4f6f;
}

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}

/* =====================================
   MICRO-INTERACTIONS
   ===================================== */

.interactive-element {
    transition: all var(--transition-fast);
}

.interactive-element:hover {
    transform: translateY(-1px);
}

.interactive-element:active {
    transform: translateY(0);
}

input::placeholder {
    font-style: italic;
}

textarea::placeholder {
    font-style: italic;
}

/* Dla stanu błędu (invalid) */

.invalid .ts-control {

    border-color: #dc3545; /* Czerwony kolor błędu */
    padding-right: calc(1.5em + .75rem);
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="%23dc3545"%3e%3ccircle cx="6" cy="6" r="4.5"/%3e%3cpath stroke-linejoin="round" d="M5.8 3.6h.4L6 6.5z"/%3e%3ccircle cx="6" cy="8.2" r=".6" fill="%23dc3545" stroke="none"/%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

/* Dla stanu poprawności (valid) */
.is-valid .ts-control {
    border-color: #198754; /* Zielony kolor poprawności */
    padding-right: calc(1.5em + .75rem);
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"%3e%3cpath fill="%23198754" d="M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z"/%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

legend {
    font-size: var(--font-size-small);
}

label {
    font-weight: 500; /* Ustawienie wagi czcionki na 600 */
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    animation-name: dropdown-animate;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    text-align: center;
    font-size: var(--font-size-small);
    padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
    color: #EAEAEAFF;
    text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
    text-decoration: none;
}

.dropdown-menu .dropdown-divider {
    color: #a5c5fe;
    margin: 0;
}

.dropdown-menu .dropdown-item {
    font-size: var(--font-size-small);
    padding: 10px 15px;
    transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #EAEAEAFF;
}

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #EAEAEAFF;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background: #4154f1;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 24px;
    color: #F0F2F4;
    line-height: 0;
}

.back-to-top:hover {
    background: #6776f4;
    color: #e1e1e1;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*Paginacja*/
.pagination {
    --bs-pagination-font-size: var(--font-size-small);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #ffff;
    --bs-pagination-active-bg: #4154f1;
    --bs-pagination-active-border-color: #4154f1;
}

.active > .page-link, .page-link.active {
    background: var(--primary-500) !important;
    border-color: var(--primary-500) !important;
}


/* generowanie pdf */
#pdfCanvas {
    max-width: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.pdf-viewer {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    padding: 0;
}

.pdf-modal-body {
    padding: 0;
}

/* Modal ma zajmować 95 % wysokości okna */
#pdfPreviewModal .modal-dialog {
    height: 95vh;
    /*   margin: 2.5vh auto;wycentrowanie w pionie */
}

#pdfPreviewModal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Głowica i stopka – stała wysokość, reszta dla widoku PDF */
#pdfPreviewModal .modal-header,
#pdfPreviewModal .modal-footer {
    flex: 0 0 auto;
}

#pdfPreviewModal .modal-body {
    flex: 1 1 0; /* cała pozostała przestrzeń */
    display: flex; /* centrowanie canvasa */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* bez przewijania */
    padding: 0;
}

/* Toast bar */
.toast {
    --bs-toast-bg: transparent;
    --bs-toast-padding-x: 0.75rem;
    --bs-toast-padding-y: 0.5rem;
    --bs-toast-margin-bottom: 0.5rem;
    --bs-toast-spacing: 1.5rem;
    --bs-toast-max-width: 350px;
    --bs-toast-font-size: 0.875rem;
    border-radius: 5px;
    background: #e1e1e1;
    transform: translateX(calc(0%));
    transition: alt 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    padding: 12px;
}

/*
.toast.active {
    transform: translatex(0%);
}

.toast .toast-header {
    display: flex;
    align-items: center;
}

.toast .toast-header .check {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    min-width: 35px;
    background-color: #2770ff;
    color: #e1e1e1;
    font-size: 20px;
    border-radius: 50%;
}

.toast-header .toast-body {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
}

.toast-body .text {
    font-size: var(--font-size-small);
    font-weight: 400;
    color: #666666;
}

.toast-body .text.text-1 {
    font-weight: 600;
    color: #333;
}

.toast .close {
    position: absolute;
    top: 2.5px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
) opacity: 0.7;
}

.toast .close:hover {
    opacity: 1;
}
*/
.toast .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
}

.toast .progress:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #484d50;
}

.progress.active:before {
    animation: progress 5s linear forwards;
}

@keyframes progress-reverse {
    0% {
        right: 100%;
    }
    100% {
        right: 0;
    }
}

@keyframes progress {
    100% {
        right: 100%;
    }
}

/*
button {
    padding: 12px 20px;
    font-size: 20px;
    outline: none;
    border: none;
    background-color: #2770ff;
    color: #e1e1e1;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background-color: #2770ff;
}

.toast.active ~ button {
    pointer-events: none;
}
/* End Toast bar */

.form-control {
    font-size: var(--font-size-small);
}

.form-select-sm {
    font-size: var(--font-size-small);
}

/* Ukryj strzałkę w dół w polach select i stylizuj opcje */
.form-select {
    font-size: var(--font-size-small);
    -webkit-appearance: none; /* Usuwa domyślny wygląd dla Chrome/Safari */
    -moz-appearance: none; /* Usuwa domyślny wygląd dla Firefox */
    appearance: none; /* Usuwa domyślny wygląd dla innych przeglądarek */
    background-image: none; /* Usuwa domyślną ikonę strzałki */
    border: #dee2e6 1px solid;
    border-radius: 5px;
    padding: 8px; /* Dodaje odstęp wewnątrz pola select */
}

.form-select option {
    border: #dee2e6 1px solid;
    border-radius: 5px;
    text-align: center !important;
    /* color: red;*/
}

a {
    color: #4154f1;
    text-decoration: none;
}

a:hover {
    color: #717ff5;
    text-decoration: none;
}

/* Dodatkowe usprawnienia */

/* nie wiem co to */
.attachment-row td:first-child {
    width: 40px;
}

.toggle {
    cursor: pointer;
}

.toggle-placeholder {
    visibility: hidden;
}

.ts-wrapper {
    position: relative;
    z-index: 10;
}

.ts-dropdown {
    z-index: 9998;
}

.no-border {
    border: none;
    padding: var(--space-1);
}

.buttons-colvis, .buttons-html5 {
    border: none !important;
}

/* Dodaj do style-finish.css */
.has-modal {
    position: static !important; /* Resetuj pozycjonowanie */
    z-index: auto !important;
    overflow: visible !important; /* Tylko gdy jest modal */
}

/* Naprawa dla DataTables */
div.dt-button-collection {
    z-index: 1041 !important; /* Niższy niż modale */
}

.modal {
    z-index: 1060 !important;
    position: fixed;
}

.modal-backdrop {
    z-index: 1059 !important;
}

/* ================
   9. WCAG 2.1 ENHANCEMENTS
   ================ */
/* Focus visible dla klawiatury */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Lepsze odstępy między elementami formularza */
.form-group {
    margin-bottom: 1rem;
}

/* Wyśrodkowanie tekstu w komórkach tabeli */
.table td,
.table th {
    vertical-align: middle;
}

/* Uniwersalne style dla wszystkich tabel DataTables */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 30px; /* Zostaw miejsce na strzałkę sortowania */
}

table.dataTable tbody td {
    padding-right: 30px; /* Dodaj padding po prawej stronie komórek */
    /* text-align: center;  Wyśrodkuj tekst w komórkach */
}

/* Wyjątek dla kolumn z klasą no-export (np. kolumna Akcja) */
table.dataTable tbody td.no-export {
    padding-right: 0.75rem; /* Przywróć standardowy padding */
}

/* Pozycjonowanie strzałek sortowania */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}


/* Pastelowe kolory dla badge'ów z borderami */
.bg-dash-pastel-blue {
    background-color: #a7d0e8;
    color: #2c3e50;
    border: 1px solid #7fb0d4;
}

.bg-dash-pastel-green {
    background-color: #c9e9c9;
    color: #27ae60;
    border: 1px solid #a8d9a8;
}

.bg-dash-pastel-yellow {
    background-color: #faf0b8;
    color: #f39c12;
    border: 1px solid #f5e18d;
}

.bg-dash-pastel-coral {
    background-color: #f5c8c4;
    color: #e74c3c;
    border: 1px solid #eea9a3;
}

.card-registry {
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.card-registry:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-300);
    background-color: rgba(65, 153, 225, 0.03);
}

.card-registry:hover .text-primary {
    color: var(--primary-600) !important;
}

.card-registry:hover .bg-dash-pastel-green {
    background-color: #b8e8d3 !important;
    transform: scale(1.05);
}

.card-registry:hover .bg-dash-pastel-yellow {
    background-color: #faf0b8 !important;
    transform: scale(1.05);
}

.card-registry:hover .bg-dash-pastel-coral {
    background-color: #f5c8c4 !important;
    transform: scale(1.05);
}

.section-border {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-control-plaintext {
    background-color: #f8f9fa;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    min-height: 38px;
}