/* ============================================================
   Klarna-inspired theme for user dashboard
   Scope: .dashboard / .dashboard-* (user area only)
   ============================================================ */

:root {
    --k-cream:        #F4FAFD;
    --k-cream-2:      #E3F4FC;
    --k-white:        #FFFFFF;
    --k-ink:          #17120F;
    --k-ink-soft:     #2A2320;
    --k-muted:        #6B6661;
    --k-line:         #CDE6F0;
    --k-pink:         #E3F4FC;
    --k-pink-soft:    #F1FAFE;
    --k-success:      #0E8A5F;
    --k-warning:      #B26A00;
    --k-danger:       #C8362F;
    --k-radius-sm:    12px;
    --k-radius:       18px;
    --k-radius-lg:    24px;
    --k-radius-pill:  999px;
    --k-shadow:       0 1px 0 rgba(23, 18, 15, 0.04), 0 8px 24px rgba(23, 18, 15, 0.04);
    --k-font-text:    'Red Hat Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --k-font-display: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------- Base typography for dashboard scope ------- */
body:has(.dashboard) {
    font-family: var(--k-font-text);
    background: var(--k-white);
    color: var(--k-ink);
    letter-spacing: -0.005em;
}

.dashboard,
.dashboard * {
    font-family: var(--k-font-text);
    letter-spacing: -0.005em;
}

.dashboard h1, .dashboard h2, .dashboard h3,
.dashboard h4, .dashboard h5, .dashboard h6,
.dashboard .dashboard-header__title,
.dashboard .db-card2__title,
.dashboard .card-title {
    font-family: var(--k-font-display);
    font-weight: 700;
    color: var(--k-ink);
    letter-spacing: -0.02em;
}

/* ------- Layout container ------- */
.dashboard {
    background: var(--k-white) !important;
    min-height: 100vh;
}

.dashboard__inner,
.dashboard-body,
.dashboard-content,
.dashboard-main {
    background: var(--k-white) !important;
    border-radius: 0 !important;
    padding: 24px 28px 64px;
    box-shadow: none !important;
}

.dashboard-body {
    max-width: none;
    margin: 0;
    padding-top: 8px;
}

/* ------- Sidebar (light, borderless) ------- */
.dashboard-sidebar,
.dashboard-sidebar__inner {
    background: var(--k-white) !important;
    color: var(--k-ink) !important;
    border: none !important;
    box-shadow: none !important;
}

.dashboard-sidebar__header {
    border-bottom: none !important;
    padding: 24px 24px 20px;
    background: var(--k-white) !important;
    box-shadow: none !important;
}

.dashboard-sidebar__logo img {
    max-height: 32px;
    /* keep original colors — no inversion */
    filter: none;
}

.dashboard-sidebar__close {
    background: var(--k-cream-2);
    border: none;
    color: var(--k-ink);
    border-radius: var(--k-radius-pill);
    width: 36px;
    height: 36px;
}

.dashboard-menu {
    padding: 16px 12px;
    background: var(--k-white) !important;
}

.dashboard-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 2px 0;
    border-radius: var(--k-radius-sm);
    color: var(--k-ink) !important;
    background: var(--k-white) !important;
    font-weight: 500;
    font-size: 15px;
    box-shadow: none !important;
    transition: background 120ms ease, color 120ms ease;
}

.dashboard-menu__item:hover {
    background: #F6F6F6 !important;
    color: var(--k-ink) !important;
}

.dashboard-menu__item.active {
    background: #F1F1F1 !important;
    color: var(--k-ink) !important;
}

.dashboard-menu__item.active .icon,
.dashboard-menu__item.active .text {
    color: var(--k-ink);
}

.dashboard-menu__item .icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-menu__item .icon svg {
    width: 22px;
    height: 22px;
    color: currentColor;
}

/* ------- Top bar (flat, white) ------- */
.dashboard-header,
.dashboard-header.dashboard-header {
    background: var(--k-white) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 16px 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none !important;
}

.dashboard-header *,
.dashboard-header__title {
    color: var(--k-ink) !important;
}

.dashboard-header__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.dashboard-header__right .user-info__button {
    background: var(--k-white) !important;
    border: 1px solid #EFEFEF !important;
    padding: 4px;
    border-radius: var(--k-radius-pill);
    box-shadow: none !important;
}

.dashboard-header__right .user-info__button img {
    width: 36px;
    height: 36px;
    border-radius: var(--k-radius-pill);
    object-fit: cover;
}

.dashboard-header__lines {
    background: transparent !important;
    border: 1px solid #EFEFEF !important;
    border-radius: var(--k-radius-sm);
    width: 40px;
    height: 40px;
    color: var(--k-ink) !important;
    box-shadow: none !important;
}

/* ------- Cards (flat, white, no shadow) ------- */
.dashboard .card,
.dashboard .db-card2,
.dashboard .db-card,
.dashboard .form-card,
.dashboard .custom--card,
.dashboard .info-card {
    background: var(--k-white) !important;
    background-image: none !important;
    border: 1px solid #EFEFEF !important;
    box-shadow: none !important;
    border-radius: var(--k-radius);
    box-shadow: none;
    overflow: hidden;
}

.dashboard .card-header,
.dashboard .form-card .card-header {
    background: var(--k-white);
    border-bottom: 1px solid var(--k-line);
    padding: 18px 22px;
}

.dashboard .card-body,
.dashboard .form-card .card-body {
    padding: 22px;
}

.dashboard .card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.dashboard .db-card2 {
    padding: 20px;
    transition: border-color 120ms ease;
}

.dashboard .db-card2:hover {
    border-color: #DDDDDD !important;
}

.dashboard .db-card2__header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.dashboard .db-card2__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--k-muted);
    text-transform: none;
    letter-spacing: 0;
}

.dashboard .db-card2__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--k-radius-pill);
    background: #F4F4F4;
    color: var(--k-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.dashboard .db-card2__icon i,
.dashboard .db-card2__icon svg {
    color: var(--k-ink);
    font-size: 15px;
    line-height: 1;
}

.dashboard .db-card2__title {
    font-family: var(--k-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--k-ink);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard .db-card2__subtitle {
    font-size: 13px;
    color: var(--k-muted);
    margin: 0;
}

/* ------- Buttons (Klarna-style, slightly rounded) ------- */
.dashboard .btn,
.dashboard-header .btn,
.dashboard-menu .btn {
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--k-font-text);
    padding: 11px 22px;
    font-size: 14px;
    letter-spacing: 0;
    border-width: 1px;
    box-shadow: none !important;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.dashboard .btn--sm {
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 6px;
}

.dashboard .btn--lg {
    padding: 14px 28px;
    font-size: 15px;
    border-radius: 10px;
}

.dashboard .btn--icon {
    border-radius: 6px;
    padding: 7px 10px;
}

.dashboard .btn--base,
.dashboard .btn--primary,
.dashboard .btn--dark,
.dashboard a.btn--base,
.dashboard a.btn--primary,
.dashboard button.btn--base,
.dashboard button.btn--primary {
    background: var(--k-pink) !important;
    background-color: var(--k-pink) !important;
    background-image: none !important;
    border-color: var(--k-pink) !important;
    color: var(--k-ink) !important;
}

.dashboard .btn--base:hover,
.dashboard .btn--primary:hover,
.dashboard .btn--dark:hover,
.dashboard a.btn--base:hover,
.dashboard a.btn--primary:hover,
.dashboard button.btn--base:hover,
.dashboard button.btn--primary:hover {
    background: #CDE9F4 !important;
    background-color: #CDE9F4 !important;
    border-color: #CDE9F4 !important;
    color: var(--k-ink) !important;
}

.dashboard .btn-outline--base,
.dashboard .btn-outline--primary,
.dashboard .btn-outline--dark {
    background: var(--k-white);
    border-color: var(--k-line);
    color: var(--k-ink);
}

.dashboard .btn-outline--base:hover,
.dashboard .btn-outline--primary:hover,
.dashboard .btn-outline--dark:hover {
    background: var(--k-cream-2);
    border-color: var(--k-cream-2);
    color: var(--k-ink);
}

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

.dashboard .btn-outline--success { color: var(--k-success); border-color: var(--k-success); background: transparent; }
.dashboard .btn-outline--warning { color: var(--k-warning); border-color: var(--k-warning); background: transparent; }
.dashboard .btn-outline--danger  { color: var(--k-danger);  border-color: var(--k-danger);  background: transparent; }

/* ------- Forms ------- */
.dashboard .form-control,
.dashboard .form-select,
.dashboard input[type="text"]:not(.no-k),
.dashboard input[type="email"]:not(.no-k),
.dashboard input[type="number"]:not(.no-k),
.dashboard input[type="password"]:not(.no-k),
.dashboard input[type="tel"]:not(.no-k),
.dashboard textarea {
    background: var(--k-white);
    border: 1.5px solid var(--k-line);
    border-radius: var(--k-radius-sm);
    padding: 12px 16px;
    font-size: 15px;
    color: var(--k-ink);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    box-shadow: none;
}

.dashboard .form-control:focus,
.dashboard .form-select:focus,
.dashboard input:focus,
.dashboard textarea:focus {
    border-color: var(--k-ink);
    box-shadow: 0 0 0 3px rgba(23, 18, 15, 0.06);
    outline: none;
}

.dashboard .form-label,
.dashboard label {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-ink);
    margin-bottom: 6px;
}

/* ------- Tables / Lists ------- */
.dashboard .table {
    background: var(--k-white);
    border-radius: var(--k-radius);
    overflow: hidden;
    border: 1px solid var(--k-line);
}

.dashboard .table thead th {
    background: var(--k-cream);
    color: var(--k-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    padding: 14px 18px;
}

.dashboard .table tbody td {
    padding: 16px 18px;
    border-top: 1px solid var(--k-line);
    border-bottom: none;
    color: var(--k-ink);
    font-size: 14px;
    vertical-align: middle;
}

.dashboard .table tbody tr:first-child td {
    border-top: none;
}

/* ------- Badges ------- */
.dashboard .badge {
    border-radius: var(--k-radius-pill);
    padding: 6px 12px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
}

.dashboard .badge--success { background: #E6F4EE; color: var(--k-success); }
.dashboard .badge--warning { background: #FBEFD9; color: var(--k-warning); }
.dashboard .badge--danger  { background: #FBE6E4; color: var(--k-danger);  }
.dashboard .badge--dark    { background: var(--k-cream-2); color: var(--k-ink); }
.dashboard .badge--primary,
.dashboard .badge--base    { background: var(--k-pink-soft); color: var(--k-ink); }

/* ------- Alerts ------- */
.dashboard .alert {
    border-radius: var(--k-radius);
    border: 1px solid var(--k-line);
    padding: 18px 22px;
    background: var(--k-white);
}

.dashboard .alert--warning,
.dashboard .alert--custom.alert--warning {
    background: #FFF4E0;
    border-color: #F4DDA8;
    color: var(--k-warning);
}

.dashboard .alert__title {
    font-family: var(--k-font-display);
    font-weight: 700;
    color: var(--k-ink);
}

/* ------- Breadcrumb ------- */
.dashboard .breadcrumb-wrapper,
.dashboard .auth-breadcrumb {
    background: transparent;
    border: none;
    padding: 0 0 16px;
}

.dashboard .breadcrumb-wrapper .breadcrumb,
.dashboard .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--k-muted);
}

.dashboard .breadcrumb a {
    color: var(--k-muted);
}

.dashboard .breadcrumb-item.active,
.dashboard .breadcrumb a:hover {
    color: var(--k-ink);
}

/* ------- Hero / page title ------- */
.dashboard h2.title,
.dashboard .page-title,
.dashboard .section-title {
    font-family: var(--k-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

/* ------- Pagination ------- */
.dashboard .pagination {
    gap: 4px;
}

.dashboard .pagination .page-link,
.dashboard .pagination .page-item .page-link {
    border-radius: var(--k-radius-sm);
    border: 1px solid var(--k-line);
    color: var(--k-ink);
    background: var(--k-white);
    padding: 8px 14px;
    font-weight: 600;
    box-shadow: none;
}

.dashboard .pagination .page-item.active .page-link {
    background: var(--k-pink);
    border-color: var(--k-pink);
    color: var(--k-ink);
}

/* ------- Misc cleanup: kill shiny / 3D effects ------- */
.dashboard [class*="gradient"],
.dashboard .bg--gradient,
.dashboard .shadow-strong {
    background-image: none !important;
    box-shadow: none !important;
}

.dashboard .card,
.dashboard .db-card2,
.dashboard .form-card {
    background-image: none !important;
}

/* ------- GLOBAL FLATTEN: pure-white everywhere, no shadows/3D ------- */
.dashboard,
.dashboard *,
.dashboard *::before,
.dashboard *::after,
.dashboard-sidebar,
.dashboard-sidebar *,
.dashboard-header,
.dashboard-header * {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    filter: none !important;
}

/* Kill any dark/colored backgrounds on top-level shells; keep
   intentional component bgs (cards/buttons/badges) intact via
   higher-specificity rules above. */
.dashboard,
.dashboard__inner,
.dashboard-body,
.dashboard-content,
.dashboard-main,
.dashboard-sidebar,
.dashboard-sidebar__inner,
.dashboard-sidebar__header,
.dashboard-menu,
.dashboard-header,
.dashboard-header__title,
.dashboard .breadcrumb-wrapper,
.dashboard .auth-breadcrumb {
    background-color: #FFFFFF !important;
}

/* ------- Mobile ------- */
@media (max-width: 1199.98px) {
    .dashboard__inner { padding: 16px; }
    .dashboard-header { padding: 12px 8px; }
    .dashboard-header__title { font-size: 18px; }
    .dashboard .db-card2__title { font-size: 24px; }

    /* Sidebar = fullscreen offcanvas on mobile */
    .dashboard .dashboard-sidebar.offcanvas-xl {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: var(--k-white) !important;
        background-image: none !important;
        z-index: 1050;
    }

    .dashboard .dashboard-sidebar__inner {
        height: 100% !important;
        background: var(--k-white) !important;
        padding-top: env(safe-area-inset-top, 0);
    }

    .dashboard .dashboard-sidebar__header {
        padding: 18px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--k-white) !important;
    }

    .dashboard .dashboard-sidebar__close {
        position: static !important;
        background: #F3F3F3 !important;
        color: var(--k-ink) !important;
        border: none !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 999px !important;
        font-size: 18px;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .dashboard .dashboard-sidebar__close i,
    .dashboard .dashboard-sidebar__close svg {
        color: var(--k-ink) !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .dashboard .dashboard-sidebar__close:hover {
        background: #E8E8E8 !important;
        color: var(--k-ink) !important;
    }

    /* Bigger tap targets in menu */
    .dashboard .dashboard-sidebar .dashboard-menu {
        padding: 12px 16px !important;
        overflow-y: auto;
    }

    .dashboard .dashboard-sidebar .dashboard-menu__item {
        padding: 14px 16px !important;
        font-size: 16px !important;
        gap: 14px !important;
    }

    .dashboard .dashboard-sidebar .dashboard-menu__item .icon {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0;
    }

    .dashboard .dashboard-sidebar .dashboard-menu__item .icon svg {
        width: 24px !important;
        height: 24px !important;
        display: block;
    }

    /* Make sure the offcanvas backdrop is light too */
    .offcanvas-backdrop {
        background: rgba(0, 0, 0, 0.35) !important;
    }

    /* Hide the burger/close lines when offcanvas is open */
    body.offcanvas-open .dashboard-header__lines {
        opacity: 0;
    }
}

@media (max-width: 575.98px) {
    .dashboard__inner { padding: 12px; }
    .dashboard-header {
        padding: 10px 4px;
        margin-bottom: 12px;
        gap: 8px;
    }
    .dashboard-header__title { font-size: 17px; }
}

/* Equal-height data-table headers */
.dashboard .data-table__header {
    min-height: 64px;
}