/* =================================================================
   QUALISER — Akademi Theme
   Inspired by Akademi (DexignLab). Clean, professional, Poppins-based.
   ================================================================= */

:root {
    /* Brand */
    --primary:        #4D44B5;
    --primary-hover:  #3d3690;
    --primary-dark:   #1e1a46;
    --primary-soft:   rgba(77, 68, 181, 0.1);
    --primary-soft-2: rgba(77, 68, 181, 0.2);

    --secondary:      #FB7D5B;
    --secondary-soft: rgba(251, 125, 91, 0.1);

    --success:        #1EBA62;
    --success-soft:   rgba(30, 186, 98, 0.12);
    --info:           #00ADA3;
    --info-soft:      rgba(0, 173, 163, 0.12);
    --warning:        #FCC43E;
    --warning-soft:   rgba(252, 196, 62, 0.15);
    --danger:         #fd5353;
    --danger-soft:    rgba(253, 83, 83, 0.12);

    /* Typography */
    --heading:        #303972;
    --body-text:      #A098AE;
    --body-text-strong: #3d4465;
    --muted:          #89879f;

    /* Surfaces */
    --body-bg:        #E6EBEE;
    --surface:        #ffffff;
    --sidebar-bg:     #ffffff;
    --header-bg:      #ffffff;
    --hover-bg:       #f6f7fb;

    /* Borders */
    --border:         #eaeaea;
    --border-light:   #D5DFE7;
    --border-soft:    #f2f2f2;

    /* Layout */
    --sidebar-width:  17rem;
    --header-height:  5rem;

    /* Radii */
    --radius-sm:      0.5rem;
    --radius:         0.625rem;
    --radius-lg:      1rem;
    --radius-xl:      1.5rem;

    /* Shadow */
    --shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow:         0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-lg:      0 15px 30px rgba(0, 0, 0, 0.05);
    --shadow-card:    0 0.9375rem 1.875rem 0rem rgba(0, 0, 0, 0.02);
}

/* ----- Base ----- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--body-text);
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--heading);
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.938rem; }

.heading { color: var(--heading); font-weight: 600; }

a {
    color: var(--primary);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--primary-hover); }

ul { padding: 0; margin: 0; }
li { list-style: none; }

.text-primary   { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success   { color: var(--success) !important; }
.text-info      { color: var(--info) !important; }
.text-warning   { color: var(--warning) !important; }
.text-danger    { color: var(--danger) !important; }
.text-muted     { color: var(--muted) !important; }
.text-heading   { color: var(--heading) !important; }

.bg-primary   { background: var(--primary) !important; color: #fff; }
.bg-secondary { background: var(--secondary) !important; color: #fff; }
.bg-success   { background: var(--success) !important; color: #fff; }
.bg-info      { background: var(--info) !important; color: #fff; }
.bg-warning   { background: var(--warning) !important; color: #fff; }
.bg-danger    { background: var(--danger) !important; color: #fff; }

.bg-primary-soft   { background: var(--primary-soft) !important; color: var(--primary); }
.bg-secondary-soft { background: var(--secondary-soft) !important; color: var(--secondary); }
.bg-success-soft   { background: var(--success-soft) !important; color: var(--success); }
.bg-info-soft      { background: var(--info-soft) !important; color: var(--info); }
.bg-warning-soft   { background: var(--warning-soft) !important; color: #b8860b; }
.bg-danger-soft    { background: var(--danger-soft) !important; color: var(--danger); }

/* ----- Main Wrapper ----- */

#main-wrapper {
    position: relative;
    background: var(--body-bg);
    min-height: 100vh;
}

/* ----- Nav Header (logo area, top-left) ----- */

.nav-header {
    height: var(--header-height);
    width: var(--sidebar-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sidebar-bg);
    text-align: left;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-soft);
}

.nav-header .brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--heading);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
}

.nav-header .brand-logo img {
    max-height: 2.5rem;
    max-width: 100%;
}

.nav-header .brand-title {
    color: var(--heading);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: -0.5px;
}

.nav-control {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    color: var(--heading);
    transition: background .2s ease;
}
.nav-control:hover { background: var(--hover-bg); }
.nav-control svg { width: 20px; height: 20px; }

/* ----- Header (top bar) ----- */

.header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background: var(--header-bg);
    z-index: 100;
    border-bottom: 1px solid var(--border-soft);
    transition: left .2s ease;
}

.header-content {
    height: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left .dashboard_bar {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--heading);
    text-transform: capitalize;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-right .nav-item {
    position: relative;
}

.header-right .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--body-text);
    border-radius: 50%;
    transition: background .2s ease, color .2s ease;
}
.header-right .nav-link:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

.header-right .nav-link .bi,
.header-right .nav-link i {
    font-size: 1.125rem;
}

.header-right .badge-dot {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--header-bg);
}

.header-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: background .2s ease;
    text-decoration: none;
}
.header-profile:hover { background: var(--hover-bg); }

.header-profile img,
.header-profile .avatar-initials {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

.header-profile .user-name {
    color: var(--heading);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
}
.header-profile .user-role {
    color: var(--body-text);
    font-size: 0.75rem;
    line-height: 1.2;
}

/* ----- Sidebar (dlabnav) ----- */

.dlabnav {
    width: var(--sidebar-width);
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    background: var(--sidebar-bg);
    z-index: 101;
    padding: 1rem 0 0;
    overflow-y: auto;
    box-shadow: var(--shadow-card);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
.dlabnav .sidebar-usage-wrap {
    margin-top: auto;
    padding: 1rem 1rem 1.25rem;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--sidebar-bg) 30%);
}

.dlabnav::-webkit-scrollbar { width: 4px; }
.dlabnav::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius: 4px; }

.dlabnav .menu-title {
    padding: 1.25rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-transform: uppercase;
}

.metismenu { padding: 0; margin: 0; list-style: none; }
.metismenu > li { position: relative; padding: 0 0.75rem; margin-bottom: 0.125rem; }

.metismenu > li > a {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    color: var(--body-text);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all .2s ease;
}

.metismenu > li > a:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

.metismenu > li > a .menu-icon,
.metismenu > li > a i,
.metismenu > li > a .bi {
    font-size: 1.25rem;
    color: var(--body-text);
    transition: color .2s ease;
    min-width: 1.5rem;
    display: inline-flex;
    justify-content: center;
}

.metismenu > li > a:hover .menu-icon,
.metismenu > li > a:hover i,
.metismenu > li > a:hover .bi {
    color: var(--primary);
}

.metismenu > li > a.active,
.metismenu > li.mm-active > a {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 16px -4px rgba(77, 68, 181, 0.35);
}

.metismenu > li > a.active i,
.metismenu > li > a.active .bi,
.metismenu > li > a.active .menu-icon,
.metismenu > li.mm-active > a i,
.metismenu > li.mm-active > a .bi {
    color: #fff;
}

.metismenu .nav-text { flex: 1; }

.metismenu .nav-badge {
    background: var(--secondary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
}

.metismenu > li > a.active .nav-badge { background: #fff; color: var(--primary); }

/* Sidebar footer widget — ulepszone wykorzystanie */

.sidebar-usage {
    padding: 1rem 1rem 1.1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(77, 68, 181, 0.55);
    position: relative;
    overflow: hidden;
}
.sidebar-usage::after {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 90px; height: 90px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
    pointer-events: none;
}

.sidebar-usage .u-head {
    display: flex; align-items: center; gap: .625rem;
    margin-bottom: .875rem;
    position: relative;
}
.sidebar-usage .u-head-ico {
    width: 2rem; height: 2rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
}
.sidebar-usage .u-head-title {
    font-size: .8125rem; font-weight: 600; line-height: 1.1; color: #fff;
}
.sidebar-usage .u-head-period {
    font-size: .6875rem; opacity: .75; text-transform: uppercase; letter-spacing: .05em; margin-top: 1px;
}

.sidebar-usage .u-item { margin-bottom: .65rem; position: relative; }
.sidebar-usage .u-item:last-of-type { margin-bottom: .9rem; }
.sidebar-usage .u-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    margin-bottom: .3rem;
    color: rgba(255, 255, 255, 0.9);
}
.sidebar-usage .u-label { opacity: .85; font-weight: 500; }
.sidebar-usage .u-val { font-variant-numeric: tabular-nums; font-weight: 500; }
.sidebar-usage .u-val b { color: #fff; font-weight: 700; }
.sidebar-usage .u-slash { opacity: .45; margin: 0 .15rem; }

.sidebar-usage .u-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    overflow: hidden;
}
.sidebar-usage .u-bar-fill {
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transition: width .4s ease;
}
.sidebar-usage .u-state-warning .u-bar-fill  { background: #FCC43E; }
.sidebar-usage .u-state-critical .u-bar-fill { background: #fd5353; }

.sidebar-usage .u-upgrade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem .75rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    margin-top: .4rem;
}
.sidebar-usage .u-upgrade:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }

/* ----- Content Body ----- */

.content-body {
    margin-left: var(--sidebar-width);
    padding-top: var(--header-height);
    min-height: 100vh;
    transition: margin-left .2s ease;
}

.container-fluid {
    padding: 1.875rem 1.875rem;
    max-width: 100%;
}

.page-titles {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.page-titles h2 {
    margin: 0;
    color: var(--heading);
    font-weight: 700;
    font-size: 1.5rem;
}
.page-titles .breadcrumb {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted);
    list-style: none;
}
.page-titles .breadcrumb li::after { content: "/"; margin-left: 0.5rem; color: var(--border); }
.page-titles .breadcrumb li:last-child::after { display: none; }
.page-titles .breadcrumb a { color: var(--primary); }

/* ----- Card ----- */

.card {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.875rem;
    margin-top: 15px;
    overflow: visible;
}
/* Wyjątek: jeśli karta zawiera tabelę — ukryj przepełnienie, żeby nie wychodzilo poza border-radius */
.card:has(> table):not(:has(.qs-select)),
.card:has(> .table-wrap):not(:has(.qs-select)) { overflow: hidden; }

.card-header {
    padding: 1.25rem 1.5rem;
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.card-header.border-0 { border-bottom: none; }
.card-header h4,
.card-header .card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--heading);
}

.card-body { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-soft); background: transparent; }

/* ----- Stat Card (dashboard KPIs) ----- */

.stat-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
}

.stat-card .stat-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.stat-card .stat-icon.primary   { background: var(--primary); color: #fff; }
.stat-card .stat-icon.secondary { background: var(--secondary); color: #fff; }
.stat-card .stat-icon.success   { background: var(--success); color: #fff; }
.stat-card .stat-icon.info      { background: var(--info); color: #fff; }
.stat-card .stat-icon.warning   { background: var(--warning); color: #fff; }
.stat-card .stat-icon.danger    { background: var(--danger); color: #fff; }
.stat-card .stat-icon.dark      { background: var(--heading); color: #fff; }

.stat-card .stat-label {
    color: var(--body-text);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.1;
}
.stat-card .stat-delta {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.stat-card .stat-delta.up    { color: var(--success); }
.stat-card .stat-delta.down  { color: var(--danger); }

/* ----- Buttons ----- */

.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all .2s ease;
    cursor: pointer;
    line-height: 1.5;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

.btn-secondary {
    background: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
}
.btn-secondary:hover { filter: brightness(1.05); color: #fff; }

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

.btn-light {
    background: var(--hover-bg);
    color: var(--heading);
    border-color: var(--border-soft);
}
.btn-light:hover { background: #eceef4; color: var(--heading); }

.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover { background: var(--primary); color: #fff; }

.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

/* ----- Badge ----- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}
.badge-primary   { background: var(--primary-soft); color: var(--primary); }
.badge-secondary { background: var(--secondary-soft); color: var(--secondary); }
.badge-success   { background: var(--success-soft); color: var(--success); }
.badge-info      { background: var(--info-soft); color: var(--info); }
.badge-warning   { background: var(--warning-soft); color: #b8860b; }
.badge-danger    { background: var(--danger-soft); color: var(--danger); }

.badge-solid-primary { background: var(--primary); color: #fff; }
.badge-solid-success { background: var(--success); color: #fff; }
.badge-solid-danger  { background: var(--danger); color: #fff; }

/* ----- Forms ----- */

.form-control, .form-select {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    padding: 0.6875rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--heading);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    line-height: 1.5;
}
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-control::placeholder { color: var(--muted); }

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--heading);
    margin-bottom: 0.5rem;
    display: inline-block;
}

.input-group {
    display: flex;
    align-items: stretch;
    position: relative;
}
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text {
    padding: 0.6875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--body-text);
}

.search-area {
    position: relative;
    max-width: 24rem;
}
.search-area .form-control {
    padding-left: 2.75rem;
    background: var(--hover-bg);
    border-color: transparent;
    border-radius: 2rem;
}
.search-area .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1rem;
    z-index: 2;
}

/* ----- Table ----- */

.table {
    width: 100%;
    margin: 0;
    color: var(--heading);
    border-collapse: collapse;
    font-size: 0.875rem;
}
.table thead th {
    background: transparent;
    padding: 0.875rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
}
.table tbody td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--heading);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover-bg); }

.table-striped tbody tr:nth-of-type(odd) { background: rgba(0, 0, 0, 0.015); }

/* ----- Avatar ----- */

.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.875rem;
}
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.125rem; }

/* ================================================================
   Qualiser UI — modale (qsConfirm/qsAlert) + toasty
   ================================================================ */

.qs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(48, 57, 114, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 10000;
}
.qs-modal-overlay.show { opacity: 1; }

.qs-modal {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 1.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transform: scale(.92);
    transition: transform .25s cubic-bezier(.19, 1, .22, 1);
    font-family: 'Poppins', sans-serif;
}
.qs-modal-overlay.show .qs-modal { transform: scale(1); }

.qs-modal-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1rem;
}
.qs-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 .5rem;
}
.qs-modal-body {
    color: var(--body-text);
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
.qs-modal-footer {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.qs-modal-footer .btn { min-width: 7rem; }

.btn-danger-solid {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger-solid:hover { filter: brightness(.95); color: #fff; }

/* ── Feedback modal (qsSuccess / qsError) z animowanym SVG ── */
.qs-feedback-modal { padding-top: 2.5rem; }

.qs-feedback-visual {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qs-feedback-icon {
    width: 110px;
    height: 110px;
    position: relative;
    z-index: 2;
}

/* Pulsujące kółko za ptaszkiem */
.qs-feedback-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 1;
}
.qs-feedback-pulse.success {
    background: var(--success-soft);
    animation: qsPulseRing 1.6s ease-out infinite;
}

@keyframes qsPulseRing {
    0%   { transform: scale(0.85); opacity: 0.7; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(0.85); opacity: 0; }
}

/* Success: obrys kółka rysuje się, potem ptaszek */
.qs-circle {
    stroke-dasharray: 226;  /* 2 * PI * 36 ≈ 226 */
    stroke-dashoffset: 226;
    animation: qsDrawCircle .55s cubic-bezier(.65, 0, .45, 1) forwards;
    transform-origin: 40px 40px;
}
.qs-check {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: qsDrawCheck .4s cubic-bezier(.65, 0, .45, 1) .45s forwards;
}
@keyframes qsDrawCircle {
    to { stroke-dashoffset: 0; }
}
@keyframes qsDrawCheck {
    to { stroke-dashoffset: 0; }
}

/* Error: kółko + dwie kreski X */
.qs-circle-error {
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    animation: qsDrawCircle .55s cubic-bezier(.65, 0, .45, 1) forwards;
}
.qs-x1, .qs-x2 {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: qsDrawX .3s cubic-bezier(.65, 0, .45, 1) .45s forwards;
}
.qs-x2 { animation-delay: .6s; }
@keyframes qsDrawX {
    to { stroke-dashoffset: 0; }
}

/* Drgniecie modala po pokazaniu (success) */
.qs-modal-overlay.qs-feedback.show .qs-modal {
    animation: qsPopBounce .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes qsPopBounce {
    0%   { transform: scale(.88); }
    60%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ── Toasts ── */
.qs-toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    background: #fff;
    color: var(--heading);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    font-weight: 500;
    transform: translateX(120%);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1);
    pointer-events: auto;
    max-width: 22rem;
    z-index: 10001;
    border-left: 4px solid var(--info);
}
.qs-toast.show { transform: translateX(0); }
.qs-toast-success { border-left-color: var(--success); }
.qs-toast-warning { border-left-color: #b8860b; }
.qs-toast-danger, .qs-toast-error { border-left-color: var(--danger); }
.qs-toast i { font-size: 1.125rem; }

.qs-toast + .qs-toast { bottom: calc(1.5rem + 3.75rem); }

/* ----- Hide native selects when wrapped in qs-select (defensive) ----- */
.qs-select > select {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* ----- Custom select (qs-select) ----- */

.qs-select {
    position: relative;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}
.qs-select.disabled { opacity: .6; pointer-events: none; }

.qs-select-trigger {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6875rem 1.25rem;
    padding-right: 2.5rem;
    min-height: calc(1.5em + 1.375rem + 2px);
    font-size: 0.875rem;
    color: var(--heading);
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    user-select: none;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qs-select-trigger:focus { outline: none; }
.qs-select-trigger .qs-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-select-trigger .qs-placeholder { color: var(--muted); }
.qs-select-trigger .qs-caret {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.75rem;
    transition: transform .2s;
    pointer-events: none;
}
.qs-select.open .qs-select-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    background: var(--surface);
}
.qs-select.open .qs-select-trigger .qs-caret {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary);
}

.qs-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-soft);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    padding: 0.25rem;
    animation: qsDropdown .18s ease-out;
}
.qs-select.open .qs-select-menu { display: block; }

@keyframes qsDropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qs-select-option {
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--heading);
    transition: background .15s, color .15s;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.4;
}
.qs-select-option:hover { background: var(--hover-bg); color: var(--primary); }
.qs-select-option.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 500;
}
.qs-select-option.active::after {
    content: '✓';
    margin-left: auto;
    color: var(--primary);
    font-weight: 700;
}
.qs-select-option.disabled { opacity: .45; cursor: not-allowed; }
.qs-select-option.disabled:hover { background: transparent; color: var(--heading); }

/* Gdy select jest wewnątrz input-group / flex — zachowaj szerokość */
.qs-select { width: 100%; }
.input-group .qs-select .qs-select-trigger { border-radius: var(--radius) 0 0 var(--radius); }

/* ----- Dropdown ----- */

.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 12rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-soft);
    padding: 0.5rem;
    z-index: 1000;
    display: none;
}
.dropdown.show .dropdown-menu,
.dropdown-menu.show { display: block; }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    color: var(--body-text-strong);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background .15s ease;
}
.dropdown-item:hover { background: var(--hover-bg); color: var(--primary); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--border-soft); margin: 0.375rem 0; }

/* ----- Utilities ----- */

.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; } .mb-1 { margin-bottom: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; } .mb-2 { margin-bottom: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; } .mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; } .mb-4 { margin-bottom: 1.5rem !important; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-12 { font-size: 0.75rem; }
.fs-14 { font-size: 0.875rem; }
.fs-18 { font-size: 1.125rem; }

.text-center { text-align: center; }
.text-end    { text-align: right; }

/* ----- Grid (simple Bootstrap-like) ----- */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.9375rem;
}
.row > [class^="col"] { padding: 0 0.9375rem; width: 100%; }

.col        { flex: 1; }
.col-auto   { flex: 0 0 auto; width: auto; }
.col-6      { flex: 0 0 50%; max-width: 50%; }
.col-4      { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-3      { flex: 0 0 25%; max-width: 25%; }
.col-12     { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
    .col-sm-6  { flex: 0 0 50%; max-width: 50%; }
    .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-3  { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-6  { flex: 0 0 50%; max-width: 50%; }
    .col-lg-8  { flex: 0 0 66.6666%; max-width: 66.6666%; }
    .col-lg-9  { flex: 0 0 75%; max-width: 75%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1200px) {
    .col-xl-3  { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-xl-6  { flex: 0 0 50%; max-width: 50%; }
    .col-xl-8  { flex: 0 0 66.6666%; max-width: 66.6666%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ----- Sidebar toggle (desktop + mobile) ----- */

/* Desktop: klik hamburgera → schowaj sidebar całkowicie */
@media (min-width: 992px) {
    .mobile-menu-btn { display: none; }

    #main-wrapper.menu-toggle .nav-header,
    #main-wrapper.menu-toggle .dlabnav {
        transform: translateX(-100%);
    }
    #main-wrapper.menu-toggle .header {
        left: 0;
    }
    #main-wrapper.menu-toggle .content-body {
        margin-left: 0;
    }
    /* Po schowaniu pokaż pływający przycisk do wysunięcia */
    #main-wrapper.menu-toggle .mobile-menu-btn {
        display: inline-flex;
    }
    /* Odsuń treść headera od hamburgera, żeby nie nakrywał tytułu */
    #main-wrapper.menu-toggle .header-content {
        padding-left: 5rem;
    }
    #main-wrapper.menu-toggle .content-body > .container-fluid {
        padding-left: 5rem;
    }
}

/* Mobile: sidebar domyślnie ukryty, klik → pokaż */
@media (max-width: 991px) {
    .nav-header { width: 17rem; transform: translateX(-100%); }
    .dlabnav    { width: 17rem; transform: translateX(-100%); }
    .header     { left: 0; padding-left: 5rem; }
    .content-body { margin-left: 0; }

    #main-wrapper.menu-toggle .nav-header,
    #main-wrapper.menu-toggle .dlabnav { transform: translateX(0); }
}

/* Pływający przycisk menu (mobile zawsze, desktop tylko gdy schowany) */
.mobile-menu-btn {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 200;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--heading);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background .15s;
}
.mobile-menu-btn:hover { background: var(--hover-bg); }
@media (min-width: 992px) {
    .mobile-menu-btn { display: none; }
}
@media (max-width: 991px) {
    .mobile-menu-btn { display: inline-flex; }
}

/* ----- Compat: analytics — tytuły bloków nie obcinane ----- */
.container-fluid .block-title,
.container-fluid .block-sub,
.container-fluid .donut-legend .ll {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word;
}
.container-fluid .block-title { font-size: .95rem !important; line-height: 1.3 !important; }
.container-fluid .block-sub   { font-size: .75rem !important; }

/* ----- Compat: stare strony z własnym .dashboard-wrapper ----- */
.container-fluid .dashboard-wrapper,
.container-fluid main.dashboard-wrapper {
    margin-left: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    max-width: 100% !important;
    position: static !important;
    z-index: auto !important;
}
/* Legacy particles/orbs/canvas — ukryć w nowym layoucie (konfliktują wizualnie) */
.container-fluid canvas#particles-canvas,
.container-fluid .bg-orb,
.container-fluid .bg-aurora,
body > canvas#particles-canvas,
body > .bg-orb { display: none !important; }
/* Legacy .page-header — daj odstęp od nowego headera */
.container-fluid .page-header { margin-top: 0; }

/* ----- Misc ----- */

.divider { height: 1px; background: var(--border-soft); margin: 1.5rem 0; }
.rounded   { border-radius: var(--radius) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow) !important; }

.spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--primary-soft);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }