/* =========================================================
   NIVOLIFY CUSTOMER DASHBOARD
   PREMIUM DARK / GLASS DESIGN
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.niv-wrapper {

    --niv-bg: #181920;

    --niv-bg-secondary: #20222c;

    --niv-card: rgba(255,255,255,0.055);

    --niv-border: rgba(255,255,255,0.10);

    --niv-orange: #ff6b35;

    --niv-orange-hover: #ff8254;

    --niv-orange-glow:
        rgba(255,107,53,0.35);

    --niv-white: #ffffff;

    --niv-muted: #a1a1a8;

    --niv-sidebar-width: 270px;

    --niv-header-height: 82px;


    min-height: 100vh;

    width: 100%;

    margin: 0;

    padding: 0;

    background:
        radial-gradient(
            circle at 70% 0%,
            #2a2d3a 0%,
            #181920 42%,
            #121318 100%
        );

    color: var(--niv-white);

    font-family:
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    position: relative;

    overflow-x: hidden;

}


/* =========================================================
   SIDEBAR
========================================================= */

.niv-sidebar {

    position: fixed;

    top: 0;

    left: 0;

    width: var(--niv-sidebar-width);

    height: 100vh;

    z-index: 1000;

    display: flex;

    flex-direction: column;

    padding: 25px 18px;

    background:
        rgba(17,18,24,0.94);

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    border-right:
        1px solid var(--niv-border);

}


/* =========================================================
   SIDEBAR LOGO
========================================================= */

.niv-sidebar-brand {

    padding: 5px 10px 30px;

}


.niv-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: #fff;

}


.niv-logo-icon {

    width: 42px;

    height: 42px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #ff6b35,
            #ff3d1f
        );

    color: #fff;

    font-size: 19px;

    font-weight: 800;

    box-shadow:
        0 8px 25px
        rgba(255,107,53,0.35);

}


.niv-logo-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.niv-logo-text strong {

    font-size: 18px;

    font-weight: 800;

    letter-spacing: -0.4px;

}


.niv-logo-text span {

    color: var(--niv-muted);

    font-size: 10px;

    font-weight: 500;

}


/* =========================================================
   SIDEBAR MENU
========================================================= */

.niv-menu {

    display: flex;

    flex-direction: column;

    gap: 7px;

    flex: 1;

}


.niv-menu-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 52px;

    padding: 0 14px;

    border-radius: 14px;

    text-decoration: none;

    color: #a7a7af;

    font-size: 14px;

    font-weight: 600;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.niv-menu-item:hover {

    color: #fff;

    background:
        rgba(255,255,255,0.06);

    transform:
        translateX(3px);

}


.niv-menu-item.active {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(255,107,53,.95),
            rgba(255,75,40,.85)
        );

    box-shadow:
        0 8px 25px
        rgba(255,107,53,.25);

}


.niv-menu-icon {

    width: 24px;

    text-align: center;

    font-size: 16px;

}


.niv-menu-label {

    flex: 1;

}


.niv-external-icon {

    font-size: 10px;

    opacity: .65;

}


/* =========================================================
   SIDEBAR USER
========================================================= */

.niv-sidebar-bottom {

    margin-top: auto;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

}


.niv-sidebar-user {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px;

    margin-bottom: 10px;

}


.niv-sidebar-avatar {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #ff6b35,
            #ff9b55
        );

    color: #fff;

    font-weight: 800;

}


.niv-sidebar-user-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.niv-sidebar-user-info strong {

    color: #fff;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.niv-sidebar-user-info span {

    color: var(--niv-muted);

    font-size: 10px;

    margin-top: 2px;

}


/* =========================================================
   LOGOUT
========================================================= */

.niv-logout {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: 100%;

    min-height: 45px;

    border-radius: 12px;

    text-decoration: none;

    color: #fff;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.08);

    font-size: 13px;

    font-weight: 600;

    transition: .25s ease;

}


.niv-logout:hover {

    background:
        rgba(255,77,77,.15);

    border-color:
        rgba(255,77,77,.30);

    color: #ff7777;

}


/* =========================================================
   HEADER
========================================================= */

.niv-header {

    position: fixed;

    top: 0;

    left: var(--niv-sidebar-width);

    right: 0;

    height: var(--niv-header-height);

    z-index: 900;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

    background:
        rgba(24,25,32,.82);

    backdrop-filter: blur(22px);

    -webkit-backdrop-filter: blur(22px);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


/* =========================================================
   HEADER LEFT
========================================================= */

.niv-header-left {

    display: flex;

    align-items: center;

    gap: 30px;

}


.niv-header-brand {

    display: none;

}


.niv-page-title h1 {

    margin: 0;

    font-size: 22px;

    line-height: 1.2;

    color: #fff;

    font-weight: 750;

}


.niv-page-title p {

    margin: 4px 0 0;

    color: var(--niv-muted);

    font-size: 11px;

}


/* =========================================================
   HEADER RIGHT
========================================================= */

.niv-header-right {

    display: flex;

    align-items: center;

    gap: 14px;

}


/* =========================================================
   SEARCH
========================================================= */

.niv-search {

    width: 220px;

    height: 42px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 14px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 12px;

    transition: .25s ease;

}


.niv-search:focus-within {

    border-color:
        rgba(255,107,53,.55);

    box-shadow:
        0 0 0 3px
        rgba(255,107,53,.08);

}


.niv-search i {

    color: #888;

    font-size: 13px;

}


.niv-search input {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #fff;

    font-size: 12px;

}


.niv-search input::placeholder {

    color: #777;

}


/* =========================================================
   NOTIFICATION
========================================================= */

.niv-notification {

    position: relative;

    width: 42px;

    height: 42px;

    border-radius: 12px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.055);

    color: #aaa;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .25s ease;

}


.niv-notification:hover {

    color: #fff;

    background:
        rgba(255,255,255,.10);

}


.niv-notification-dot {

    position: absolute;

    top: 9px;

    right: 9px;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #ff6b35;

    box-shadow:
        0 0 8px
        rgba(255,107,53,.8);

}


/* =========================================================
   USER
========================================================= */

.niv-user {

    min-width: 165px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 6px 10px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.08);

}


.niv-avatar {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #ff6b35,
            #ff925d
        );

    color: #fff;

    font-size: 13px;

    font-weight: 800;

}


.niv-user-info {

    display: flex;

    flex-direction: column;

    min-width: 0;

    flex: 1;

}


.niv-user-info strong {

    color: #fff;

    font-size: 11px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.niv-user-info small {

    color: #85858d;

    font-size: 9px;

    margin-top: 2px;

}


.niv-user-arrow {

    color: #777;

    font-size: 9px;

}


/* =========================================================
   MAIN
========================================================= */

.niv-main {

    margin-left: var(--niv-sidebar-width);

    padding-top: var(--niv-header-height);

    min-height: 100vh;

    width: calc(
        100% - var(--niv-sidebar-width)
    );

}


/* =========================================================
   CONTENT
========================================================= */

.niv-content {

    width: 100%;

    max-width: 1450px;

    margin: 0 auto;

    padding: 30px;

}


/* =========================================================
   EXISTING FORM AREA
========================================================= */

.niv-form-area {

    width: 100%;

}


.niv-form-area .niv-card {

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 20px;

    padding: 28px;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.20);

}


.niv-form-area .niv-card h2 {

    color: #fff;

}


.niv-form-area .niv-card p {

    color: #a1a1a8;

}


/* =========================================================
   REMOVE DEFAULT HR LOOK
========================================================= */

.niv-form-area hr {

    border: 0 !important;

    border-top:
        1px solid
        rgba(255,255,255,.08) !important;

}


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

@media (max-width: 900px) {

    .niv-sidebar {

        width: 220px;

    }

    .niv-header {

        left: 220px;

    }

    .niv-main {

        margin-left: 220px;

        width:
            calc(100% - 220px);

    }

    .niv-search {

        width: 160px;

    }

    .niv-user {

        min-width: auto;

    }

    .niv-user-info,
    .niv-user-arrow {

        display: none;

    }

}


@media (max-width: 700px) {

    .niv-sidebar {

        width: 72px;

        padding:
            20px 10px;

    }

    .niv-logo-text,
    .niv-menu-label,
    .niv-sidebar-user-info,
    .niv-logout span {

        display: none;

    }

    .niv-logo {

        justify-content: center;

    }

    .niv-menu-item {

        justify-content: center;

        padding: 0;

    }

    .niv-sidebar-user {

        justify-content: center;

    }

    .niv-logout {

        font-size: 0;

    }

    .niv-logout i {

        font-size: 16px;

    }

    .niv-header {

        left: 72px;

        padding:
            0 15px;

    }

    .niv-main {

        margin-left: 72px;

        width:
            calc(100% - 72px);

    }

    .niv-search {

        display: none;

    }

    .niv-content {

        padding: 20px 15px;

    }

}


@media (max-width: 480px) {

    .niv-page-title h1 {

        font-size: 18px;

    }

    .niv-page-title p {

        font-size: 9px;

    }

    .niv-header-right {

        gap: 7px;

    }

    .niv-user {

        padding: 4px;

        background: transparent;

        border: none;

    }

    .niv-form-area .niv-card {

        padding: 18px;

        border-radius: 15px;

    }

}/* =========================================================
   FIX: REMOVE EMPTY SPACE ABOVE PROFILE INFORMATION
========================================================= */

.niv-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Main content starts immediately below header */
.niv-main {
    padding-top: 82px !important;
    margin-top: 0 !important;
}

/* Remove extra top spacing */
.niv-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Profile editor moves up */
.niv-form-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Profile Information card */
.niv-form-area .niv-card {
    margin-top: 0 !important;
}

/* Prevent WordPress/theme from adding space */
.niv-wrapper .site-main,
.niv-wrapper .site-content,
.niv-wrapper .entry-content,
.niv-wrapper .page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove first-child spacing */
.niv-content > *:first-child {
    margin-top: 0 !important;
}

.niv-form-area > *:first-child {
    margin-top: 0 !important;
}

.niv-form-area .niv-card:first-child {
    margin-top: 0 !important;
}


/* =========================================================
   KEEP HEADER FIXED
========================================================= */

.niv-header {
    top: 0 !important;
    height: 82px !important;
}


/* =========================================================
   PROFILE CARD POSITION
========================================================= */

.niv-main .niv-content {
    position: relative;
    top: 0 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .niv-main {
        padding-top: 82px !important;
    }

    .niv-content {
        padding-top: 0 !important;
    }

}/* =========================================================
   NIVOLIFY DASHBOARD — FINAL SPACING FIX
========================================================= */


/* ---------------------------------------------------------
   1. Dashboard পুরো জায়গা background দিয়ে fill করবে
--------------------------------------------------------- */

.niv-wrapper {
    min-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    background:
        radial-gradient(
            circle at 70% 0%,
            #2a2d3a 0%,
            #181920 45%,
            #121318 100%
        ) !important;
}


/* ---------------------------------------------------------
   2. Main area-তে আর কোনো white background থাকবে না
--------------------------------------------------------- */

.niv-main {
    min-height: 100vh !important;

    margin-left: 270px !important;

    padding-top: 82px !important;

    width: calc(100% - 270px) !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   3. Header-এর নিচে white gap বন্ধ
--------------------------------------------------------- */

.niv-content {
    width: 100% !important;

    max-width: 1450px !important;

    margin: 0 auto !important;

    padding: 24px 30px 50px !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   4. Profile area একদম normal position-এ থাকবে
--------------------------------------------------------- */

.niv-form-area {
    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    position: relative !important;

    top: 0 !important;
}


/* ---------------------------------------------------------
   5. Profile Information Card
--------------------------------------------------------- */

.niv-form-area > .niv-card {

    width: 100% !important;

    margin: 0 !important;

    padding: 30px !important;

    background:
        rgba(255,255,255,0.055) !important;

    border:
        1px solid rgba(255,255,255,0.10) !important;

    border-radius: 22px !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.22) !important;

}


/* ---------------------------------------------------------
   6. Profile title
--------------------------------------------------------- */

.niv-form-area .niv-card h2:first-child {

    margin-top: 0 !important;

    margin-bottom: 8px !important;

    color: #ffffff !important;

}


/* ---------------------------------------------------------
   7. Profile description
--------------------------------------------------------- */

.niv-form-area .niv-card > p {

    margin-top: 0 !important;

    margin-bottom: 20px !important;

    color: #a1a1a8 !important;

}


/* ---------------------------------------------------------
   8. HR-এর spacing
--------------------------------------------------------- */

.niv-form-area .niv-card hr {

    margin:
        20px 0 24px !important;

    border: 0 !important;

    border-top:
        1px solid rgba(255,255,255,0.10) !important;

}


/* =========================================================
   SAVE INFORMATION BUTTON FIX
========================================================= */


/* Common WordPress / custom save buttons */

.niv-form-area button[type="submit"],
.niv-form-area input[type="submit"],
.niv-form-area .save-information,
.niv-form-area .save-btn,
.niv-form-area .niv-save-btn,
.niv-form-area #save-information,
.niv-form-area #save-profile {

    display: block !important;

    position: relative !important;

    clear: both !important;

    margin-top: 35px !important;

    margin-bottom: 15px !important;

    z-index: 20 !important;

}


/* ---------------------------------------------------------
   If Save button is inside a form
--------------------------------------------------------- */

.niv-form-area form {

    padding-bottom: 20px !important;

}


/* ---------------------------------------------------------
   Upload fields যেন button-এর সাথে লেগে না থাকে
--------------------------------------------------------- */

.niv-form-area input[type="file"] {

    display: block !important;

    margin-bottom: 15px !important;

}


/* File upload wrapper */

.niv-form-area .upload-field,
.niv-form-area .file-upload,
.niv-form-area .profile-upload,
.niv-form-area .cover-upload {

    margin-bottom: 20px !important;

}


/* ---------------------------------------------------------
   Save button-এর জন্য আলাদা bottom space
--------------------------------------------------------- */

.niv-form-area form > :last-child {

    margin-bottom: 20px !important;

}


/* =========================================================
   DASHBOARD SCROLL
========================================================= */

.niv-main {

    overflow: visible !important;

}


.niv-content {

    overflow: visible !important;

}


/* =========================================================
   HEADER
========================================================= */

.niv-header {

    top: 0 !important;

    left: 270px !important;

    right: 0 !important;

    height: 82px !important;

    margin: 0 !important;

}


/* =========================================================
   SIDEBAR
========================================================= */

.niv-sidebar {

    top: 0 !important;

    left: 0 !important;

    height: 100vh !important;

}


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

@media (max-width: 900px) {

    .niv-main {

        margin-left: 220px !important;

        width:
            calc(100% - 220px) !important;

    }

    .niv-header {

        left: 220px !important;

    }

}


@media (max-width: 700px) {

    .niv-main {

        margin-left: 72px !important;

        width:
            calc(100% - 72px) !important;

        padding-top: 82px !important;

    }

    .niv-header {

        left: 72px !important;

    }

    .niv-content {

        padding:
            20px 15px 40px !important;

    }

}


/* =========================================================
   FINAL SAFETY — NO WHITE GAP
========================================================= */

html,
body {

    margin: 0 !important;

    padding: 0 !important;

}


body {

    background: #181920 !important;

}


/* Prevent theme content spacing */

.niv-wrapper * {

    scroll-margin-top: 90px;

}/* =========================================================
   PROFILE INFORMATION POSITION
   ONLY MOVE THE PROFILE PANEL UP
========================================================= */

.niv-form-area {
    position: relative !important;

    /* Profile panel moves upward */
    top: -95px !important;

    margin-left: 25px !important;

    width: calc(100% - 25px) !important;
}


/* Keep the Profile Information card itself normal */

.niv-form-area > .niv-card {
    position: relative !important;

    margin: 0 !important;

    width: 100% !important;
}


/* =========================================================
   SAVE INFORMATION BUTTON
========================================================= */

.niv-form-area button[type="submit"],
.niv-form-area input[type="submit"] {

    position: relative !important;

    margin-top: 35px !important;

    z-index: 20 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .niv-form-area {

        top: -75px !important;

        margin-left: 15px !important;

        width: calc(100% - 15px) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .niv-form-area {

        top: -25px !important;

        margin-left: 0 !important;

        width: 100% !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .niv-form-area {

        top: -25px !important;

        margin-left: 0 !important;

        width: 100% !important;
    }

}