/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    /*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/*Custom Css*/
:focus {
    outline: -webkit-focus-ring-color auto 0px !important;
}
.body_div {
height: calc(100vh - 50px);
overflow: auto;
}
.login_logo {
    max-width: 300px;
    margin: 0 auto 10px;
    filter: brightness(0) invert(1);
}

table td a {
    padding: 0 10px 0 0;
}

.styled-select.slate {
    margin: 15px 0;
}

    .styled-select.slate select {
        background-image: url('/assets/images/down-arrow.svg');
        background-repeat: no-repeat;
        background-position: center right 15px;
        background-size: 15px;
        height: 34px;
        width: 100%;
        border-top: 0px solid #ccc;
        border-left: 0px solid #ccc;
        border-right: 0px solid #ccc;
        border-bottom: 1px solid #ccc;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }
        .styled-select.slate select optgroup, .styled-select.slate select option{
            line-height: 25px;
            padding: 5px;
        }
.section_title {
margin-top:25px;
}
.top_space {
    margin-top: 25px;
}
.logo-area  img{
    max-width:180px;
}
.user_nav {
    float: right;
    position: relative;
    padding: 14px 0 14px 45px;
    color: #fff;
}
    .user_nav span, .user_nav a {
        display: block;
    }
    .user_nav .user_img {
        position: absolute;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        overflow: hidden;
        left: 0px;
        top: calc(50% - 17.5px);
    }
.user_nav .name{
    font-size: 16px;
    line-height: 16px;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}
    .user_nav a {
    width: 100%;
    text-decoration: none;
    color: #fff;
    }
a.back_btn {
    position: fixed;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 0 25px 25px 0;
    background-color: #0684f2;
    top: calc(50% - 20px);
    text-align: center;
    padding: 7px 0px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
a.back_btn img{
    width: 25px;
    display: inline-block;
}


/* ==========================================================================
   MODERN DESIGN UPGRADE  –  mt11 Admin v2
   Applied last so all overrides take effect cleanly.
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
    --c-primary:        #1a56db;
    --c-primary-dark:   #1e40af;
    --c-primary-light:  #eff6ff;
    --c-accent:         #7c3aed;

    --c-success:        #059669;
    --c-warning:        #d97706;
    --c-danger:         #dc2626;
    --c-info:           #0891b2;

    /* Surfaces */
    --bg-page:          #f0f4f8;
    --bg-card:          #ffffff;
    --bg-subtle:        #f8fafc;

    /* Navigation */
    --nav-bg:           #0f172a;
    --nav-text:         #94a3b8;
    --nav-text-hover:   #f1f5f9;

    /* Header */
    --header-start:     #1a3a6b;
    --header-end:       #1a56db;

    /* Shadows */
    --sh-xs:   0 1px 2px rgba(0,0,0,.06);
    --sh-sm:   0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --sh-md:   0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --sh-lg:   0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);

    /* Text */
    --t-primary:   #0f172a;
    --t-secondary: #475569;
    --t-muted:     #94a3b8;

    /* Misc */
    --border:    #e2e8f0;
    --r-sm:      4px;
    --r:         8px;
    --r-lg:      14px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
    background: var(--bg-page) !important;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--t-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.header-top-area,
.footer-copyright-area {
    background: linear-gradient(90deg, var(--header-start) 0%, var(--header-end) 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
    position: relative !important;
}

/* Accent gradient underline */
.header-top-area::after {
    content: '' !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 0 !important; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primary), var(--c-info)) !important;
    z-index: 10 !important;
}

.logo-area img {
    max-width: 155px !important;
    filter: brightness(0) invert(1) !important;
    opacity: .92 !important;
}

.user_nav .name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

.user_nav a {
    font-size: 11.5px !important;
    opacity: .82 !important;
    transition: opacity .15s ease !important;
}

.user_nav a:hover {
    opacity: 1 !important;
    color: #fff !important;
}

/* ── Navigation bar ─────────────────────────────────────────────────────── */
.main-menu-area {
    background: var(--nav-bg) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
    border-top: 1px solid rgba(255,255,255,.04) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 46px !important;
}

ul.nav.nav-tabs.notika-menu-wrap {
    border-bottom: none !important;
    flex-wrap: wrap !important;
}

ul.notika-menu-wrap li > a {
    color: var(--nav-text) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 13px 13px !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transition: color .18s ease, background .18s ease !important;
    letter-spacing: .02em !important;
}

ul.notika-menu-wrap li > a:hover,
ul.notika-menu-wrap li > a:focus {
    color: var(--nav-text-hover) !important;
    background: rgba(255,255,255,.07) !important;
    border: none !important;
}

.nav-tabs.notika-menu-wrap > li.active > a,
.nav-tabs.notika-menu-wrap > li.active > a:focus,
.nav-tabs.notika-menu-wrap > li.active > a:hover {
    background: var(--c-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: inset 0 -3px 0 rgba(255,255,255,.25) !important;
}

ul.notika-menu-wrap li > a .fa {
    font-size: 13px !important;
    margin-right: 4px !important;
    opacity: .8 !important;
}

/* Dropdown menus */
.custom-menu-content .tab-pane.active {
    min-width: 220px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.14) !important;
    border-radius: 0 0 var(--r) var(--r) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
}

.notika-tab-menu-bg:before {
    background: #fff !important;
    border-radius: 0 0 var(--r) var(--r) !important;
}

.custom-menu-content ul.notika-main-menu-dropdown li {
    display: block !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.custom-menu-content ul.notika-main-menu-dropdown li:last-child {
    border-bottom: none !important;
}

.custom-menu-content ul.notika-main-menu-dropdown li a {
    color: var(--t-secondary) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 11px 18px !important;
    display: block !important;
    transition: all .15s ease !important;
    position: relative !important;
    z-index: 10 !important;
}

.custom-menu-content ul.notika-main-menu-dropdown li:hover {
    background: var(--c-primary-light) !important;
}

.custom-menu-content ul.notika-main-menu-dropdown li:hover > a {
    color: var(--c-primary) !important;
    padding-left: 22px !important;
}

/* ── Page title bar ─────────────────────────────────────────────────────── */
.form-element-area {
    border-radius: var(--r) !important;
    box-shadow: var(--sh-xs) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
}

.form-element-area h3 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--t-primary) !important;
    margin: 0 !important;
    letter-spacing: -.01em !important;
    line-height: 1.4 !important;
}

/* ── Content panels ─────────────────────────────────────────────────────── */
.data-table-list,
.form-element-list,
.normal-table-list,
.notika-icon-int,
.sale-statistic-inner,
.statistic-right-area,
.email-statis-inner,
.realtime-wrap {
    background: var(--bg-card) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh-sm) !important;
    border: 1px solid var(--border) !important;
}

/* Bootstrap panel */
.panel { border-radius: var(--r) !important; border-color: var(--border) !important; box-shadow: var(--sh-sm) !important; }
.panel-heading { background: var(--bg-subtle) !important; border-bottom: 1px solid var(--border) !important; border-radius: var(--r) var(--r) 0 0 !important; font-weight: 600 !important; color: var(--t-primary) !important; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { font-size: 13px !important; margin-bottom: 0 !important; }

.table > thead > tr > th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
    border-bottom: 2px solid var(--border) !important;
    border-top: none !important;
    padding: 11px 14px !important;
    white-space: nowrap !important;
}

.table > tbody > tr > td {
    padding: 10px 14px !important;
    border-top: 1px solid #f1f5f9 !important;
    color: var(--t-secondary) !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover > td {
    background: #f5f8ff !important;
    color: var(--t-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfc !important;
}

.table-striped > tbody > tr:nth-of-type(odd):hover > td {
    background: #f5f8ff !important;
}

.table-bordered { border: 1px solid var(--border) !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid #eef2f7 !important;
}

.table-responsive { border: none !important; border-radius: var(--r) !important; }

/* Sticky table head */
.fixed_headers thead { background: #f8fafc !important; }
.fixed_headers thead tr th {
    background: #f8fafc !important;
    font-weight: 700 !important;
    color: #475569 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--r-sm) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: all .2s ease !important;
    letter-spacing: .01em !important;
}

/* Success / primary action */
.btn-success,
.btn-success.notika-btn-success,
.btn-success.success-icon-notika {
    background: linear-gradient(135deg, #1a56db 0%, #1e40af 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(26,86,219,.32) !important;
}
.btn-success:hover,
.btn-success.notika-btn-success:hover,
.btn-success.success-icon-notika:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    box-shadow: 0 4px 14px rgba(26,86,219,.42) !important;
    transform: translateY(-1px) !important;
}

/* Primary */
.btn-primary,
.btn-primary.notika-btn-primary,
.btn-primary.notika-gp-primary,
.btn-primary.primary-icon-notika {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(59,130,246,.3) !important;
}
.btn-primary:hover,
.btn-primary.notika-btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.4) !important;
    transform: translateY(-1px) !important;
}

/* Danger */
.btn-danger,
.btn-danger.notika-btn-danger,
.btn-danger.danger-icon-notika {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(239,68,68,.28) !important;
}
.btn-danger:hover,
.btn-danger.notika-btn-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 12px rgba(239,68,68,.38) !important;
    transform: translateY(-1px) !important;
}

/* Warning */
.btn-warning,
.btn-warning.notika-btn-warning,
.btn-warning.warning-icon-notika {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(245,158,11,.3) !important;
}
.btn-warning:hover,
.btn-warning.notika-btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    transform: translateY(-1px) !important;
}

/* Info */
.btn-info,
.btn-info.notika-btn-info,
.btn-info.info-icon-notika {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(14,165,233,.3) !important;
}

/* Default (outline style) */
.btn-default,
.btn-default.notika-btn-default {
    background: #fff !important;
    border: 1.5px solid var(--border) !important;
    color: var(--t-secondary) !important;
    box-shadow: var(--sh-xs) !important;
}
.btn-default:hover,
.btn-default.notika-btn-default:hover {
    background: var(--bg-subtle) !important;
    border-color: #c7d5e8 !important;
    color: var(--t-primary) !important;
}

/* Login fab */
.btn-float {
    border-radius: 50% !important;
    width: 54px !important; height: 54px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-login.btn-success {
    background: linear-gradient(135deg, #1a56db 0%, #7c3aed 100%) !important;
    border: none !important;
    box-shadow: 0 5px 20px rgba(26,86,219,.48) !important;
    transition: all .25s ease !important;
}
.btn-login.btn-success:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 28px rgba(26,86,219,.58) !important;
}

/* ── Form controls ──────────────────────────────────────────────────────── */
.form-control {
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    color: var(--t-primary) !important;
    background: #f8fafc !important;
    transition: border-color .2s, box-shadow .2s !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(26,86,219,.12) !important;
    background: #fff !important;
    outline: none !important;
}

.form-control::placeholder { color: var(--t-muted) !important; }

.input-group-addon,
.input-group-addon.nk-ic-st-pro {
    background: #f1f5f9 !important;
    border: 1.5px solid var(--border) !important;
    border-right: none !important;
    color: var(--t-muted) !important;
    border-radius: var(--r-sm) 0 0 var(--r-sm) !important;
    padding: 8px 12px !important;
}

.input-group > .form-control:not(:first-child) {
    border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
}

label {
    color: var(--t-secondary) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    letter-spacing: .01em !important;
}

select.form-control { background: #f8fafc !important; cursor: pointer !important; }

.styled-select.slate select {
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background-color: #f8fafc !important;
    color: var(--t-primary) !important;
    font-size: 13.5px !important;
    transition: border-color .2s !important;
    padding: 6px 32px 6px 10px !important;
}
.styled-select.slate select:focus {
    border-color: var(--c-primary) !important;
    outline: none !important;
}

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-content {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 48%, #312e81 100%) !important;
    min-height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Glow orb */
.login-content::after {
    content: '' !important;
    position: absolute !important;
    top: -180px !important; right: -180px !important;
    width: 520px !important; height: 520px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.nk-block { position: relative !important; z-index: 1 !important; }

.nk-form,
.error-page-wrap {
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12) !important;
    border-radius: 20px !important;
    border: none !important;
}

.nk-block:not(.lc-block-alt) .nk-form {
    padding: 48px 44px 42px !important;
}

.login_logo {
    max-width: 230px !important;
    margin: 0 auto 6px !important;
    filter: brightness(0) invert(1) !important;
    opacity: .9 !important;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-content {
    border: none !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.28) !important;
    overflow: hidden !important;
}

.modal-header {
    background: linear-gradient(90deg, var(--header-start), var(--header-end)) !important;
    border-bottom: none !important;
    padding: 15px 20px !important;
    border-radius: 0 !important;
}

.modal-header h4,
.modal-header .modal-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.modal-header .close {
    color: #fff !important;
    opacity: .75 !important;
    font-size: 20px !important;
    margin-top: 1px !important;
}

.modal-header .close:hover { opacity: 1 !important; }

.modal-body {
    padding: 20px !important;
    color: var(--t-secondary) !important;
    font-size: 13.5px !important;
}

.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding: 13px 20px !important;
    background: var(--bg-subtle) !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
    color: var(--t-secondary) !important;
    border-color: var(--border) !important;
    border-radius: var(--r-sm) !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    padding: 5px 10px !important;
    transition: all .15s ease !important;
}
.pagination > li > a:hover {
    background: var(--c-primary-light) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(26,86,219,.35) !important;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--r) !important; border: none !important; font-size: 13.5px !important; font-weight: 500 !important; }
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; border-left: 4px solid #059669 !important; }
.alert-danger  { background: #fef2f2 !important; color: #991b1b !important; border-left: 4px solid #dc2626 !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; border-left: 4px solid #d97706 !important; }
.alert-info    { background: #eff6ff !important; color: #1e40af !important; border-left: 4px solid #3b82f6 !important; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { border-radius: 20px !important; font-weight: 600 !important; font-size: 10.5px !important; padding: 3px 8px !important; letter-spacing: .02em !important; }
.label { border-radius: var(--r-sm) !important; font-weight: 600 !important; font-size: 11px !important; padding: 3px 7px !important; }

/* ── Nav tabs (inside pages) ────────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--border) !important; }
.nav-tabs > li > a {
    color: var(--t-secondary) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    margin-right: 4px !important;
    transition: all .2s ease !important;
}
.nav-tabs > li > a:hover {
    background: transparent !important;
    border-bottom-color: #cbd5e1 !important;
    color: var(--t-primary) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--c-primary) !important;
    border: none !important;
    border-bottom: 3px solid var(--c-primary) !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* ── Checkboxes ─────────────────────────────────────────────────────────── */
.checkmark {
    border-radius: 5px !important;
    border: 2px solid #94a3b8 !important;
    transition: all .15s ease !important;
}
.checkContainer:hover input ~ .checkmark { border-color: var(--c-primary) !important; }
.checkContainer input:checked ~ .checkmark {
    background-color: var(--c-primary) !important;
    border-color:     var(--c-primary) !important;
}

/* ── Toggle switch ──────────────────────────────────────────────────────── */
input:checked + .slider {
    background-color: var(--c-primary) !important;
}
.slider { border-radius: 17px !important; transition: .3s !important; }

/* ── Radio ──────────────────────────────────────────────────────────────── */
.radio-type-2 { border-color: var(--c-primary) !important; }
.radio-inline-2 input:checked ~ .radio-type-2:after { background: var(--c-primary) !important; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: #f1f5f9 !important; }
::-webkit-scrollbar-thumb { background: #c7d5e8 !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary) !important; }

/* ── Status labels ──────────────────────────────────────────────────────── */
.n2stop {
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    border-radius: var(--r) !important; font-weight: 700 !important; font-size: 22px !important;
}
.n2start {
    background: linear-gradient(135deg, #34d399, #059669) !important;
    border-radius: var(--r) !important; font-weight: 700 !important; font-size: 22px !important;
}
.n2status {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    border-radius: var(--r) !important; font-weight: 700 !important; font-size: 22px !important;
}

/* ── Misc ───────────────────────────────────────────────────────────────── */
.section_title {
    margin-top: 20px !important;
    border-left: 4px solid var(--c-primary) !important;
    padding-left: 10px !important;
}

.greencolor { color: #059669 !important; }
.redcolor   { color: #dc2626 !important; }

a:hover { color: var(--c-primary) !important; }
hr { border-top: 1px solid var(--border) !important; margin: 18px 0 !important; }

a.back_btn {
    background-color: var(--c-primary) !important;
    box-shadow: 0 3px 10px rgba(26,86,219,.3) !important;
}

li.active > a {
    color: var(--c-primary) !important;
    font-weight: 700 !important;
}

/* Progress bar */
.progress {
    border-radius: 20px !important;
    height: 7px !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
}
.progress-bar { border-radius: 20px !important; }

/* DataTables upgrade */
table.dataTable thead th {
    background: var(--bg-subtle) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    letter-spacing: .055em !important;
    border-bottom: 2px solid var(--border) !important;
    padding: 11px 14px !important;
}
table.dataTable tbody td {
    font-size: 13px !important;
    color: var(--t-secondary) !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    border-top: 1px solid #f1f5f9 !important;
}
table.dataTable tbody tr:hover { background: #f5f8ff !important; }

/* Confirmation dialog header */
#confirmation-dialog .modal-header {
    background: linear-gradient(90deg, var(--header-start), var(--header-end)) !important;
}

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-top-area::after { display: none !important; }
    .main-menu-area { background: var(--nav-bg) !important; }
    .nk-block:not(.lc-block-alt) .nk-form { padding: 32px 24px 28px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide legacy top-nav elements */
.header-top-area,
.mobile-menu-area,
.main-menu-area {
    display: none !important;
}

/* ── Sidebar shell ───────────────────────────────────────────────────────── */
.sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 240px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 2px 0 8px rgba(0,0,0,.1) !important;
    border-right: 1px solid #e2e8f0 !important;
}

/* ── Logo area — same height as topbar, dark bg so logo is always visible ── */
.sidebar-brand {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: linear-gradient(90deg, #1a3a6b 0%, #1a56db 100%) !important;
    border-bottom: none !important;
}

.sidebar-brand img {
    -webkit-filter: brightness(0) invert(1) !important;
    filter: brightness(0) invert(1) !important;
    max-width: 148px !important;
    height: auto !important;
    opacity: 1 !important;
    display: block !important;
}

/* ── Nav container — scrolls independently ───────────────────────────────── */
.sidebar-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 20px !important;
}

.sidebar-nav::-webkit-scrollbar { width: 4px !important; }
.sidebar-nav::-webkit-scrollbar-track { background: #f1f5f9 !important; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 2px !important; }

.sidebar-menu {
    list-style: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

/* ── Menu item ───────────────────────────────────────────────────────────── */
.sidebar-item { margin: 0 !important; }

.sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 18px !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .18s ease, color .18s ease !important;
    position: relative !important;
    border-left: 3px solid transparent !important;
    white-space: nowrap !important;
}

.sidebar-link:hover,
.sidebar-link:focus {
    color: #1a56db !important;
    background: #eff6ff !important;
    text-decoration: none !important;
    border-left-color: #93c5fd !important;
}

.sidebar-link .fa:first-child {
    width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    color: #64748b !important;
}

/* Active indicator */
.sidebar-item.active > .sidebar-link {
    color: #1a56db !important;
    background: #eff6ff !important;
    border-left-color: #1a56db !important;
    font-weight: 600 !important;
}

/* Open parent */
.sidebar-item.open > .sidebar-link {
    color: #1a56db !important;
    background: #eff6ff !important;
    border-left-color: #1a56db !important;
    font-weight: 600 !important;
}

/* ── Chevron arrow ───────────────────────────────────────────────────────── */
.sidebar-arrow {
    margin-left: auto !important;
    font-size: 11px !important;
    opacity: .6 !important;
    transition: transform .25s ease !important;
    flex-shrink: 0 !important;
}

.sidebar-item.open > .sidebar-link .sidebar-arrow {
    transform: rotate(90deg) !important;
    opacity: 1 !important;
}

/* ── Submenu (accordion) ─────────────────────────────────────────────────── */
.sidebar-submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height .3s ease !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
}

.sidebar-item.open > .sidebar-submenu {
    max-height: 600px !important;
}

.sidebar-submenu li > a {
    display: block !important;
    padding: 9px 18px 9px 46px !important;
    color: #475569 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color .15s, background .15s !important;
    border-left: 3px solid transparent !important;
}

.sidebar-submenu li > a:hover,
.sidebar-submenu li > a:focus {
    color: #1a56db !important;
    background: #eff6ff !important;
    text-decoration: none !important;
}

.sidebar-submenu li.active > a {
    color: #1a56db !important;
    font-weight: 600 !important;
    border-left-color: #1a56db !important;
    background: #dbeafe !important;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
    position: fixed !important;
    top: 0 !important; left: 240px !important; right: 0 !important;
    height: 58px !important;
    background: linear-gradient(90deg, var(--header-start) 0%, var(--header-end) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 22px !important;
    z-index: 1040 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}

.topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.topbar-title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.topbar-records .styled-select.slate select {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #fff !important;
    border-radius: var(--r-sm) !important;
    font-size: 12px !important;
    padding: 4px 28px 4px 10px !important;
}

.topbar-right .user_nav {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.topbar-right .user_img img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.35) !important;
    object-fit: cover !important;
}

.topbar-right .data {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 1px !important;
}

.topbar-right .name {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.topbar-right .data a {
    color: rgba(255,255,255,.75) !important;
    font-size: 11.5px !important;
    text-decoration: none !important;
    transition: color .15s !important;
}

.topbar-right .data a:hover { color: #fff !important; }

/* ── Content area push ───────────────────────────────────────────────────── */
body.has-sidebar [ui-view] {
    margin-left: 240px !important;
    padding-top: 68px !important;
    min-height: calc(100vh - 68px) !important;
}

/* Ensure containers inside content don't double-pad */
body.has-sidebar [ui-view] > .container,
body.has-sidebar [ui-view] > .container-fluid {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Back button repositioned for sidebar layout */
body.has-sidebar a.back_btn {
    top: auto !important;
    bottom: 24px !important;
    left: 0 !important;
    z-index: 1060 !important;
}

/* ── Responsive: collapse sidebar on small screens ───────────────────────── */
@media (max-width: 900px) {
    .sidebar { width: 200px !important; }
    .topbar  { left: 200px !important; }
    body.has-sidebar [ui-view] { margin-left: 200px !important; }
}

@media (max-width: 640px) {
    .sidebar { transform: translateX(-100%) !important; }
    .topbar  { left: 0 !important; }
    body.has-sidebar [ui-view] { margin-left: 0 !important; padding-top: 68px !important; }
}

/* ── Floating label — animate on hover ──────────────────────────────────── */
.float-lb .nk-int-st .nk-label {
    -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease !important;
    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease !important;
}
.float-lb .nk-int-st:hover .nk-label,
.float-lb .nk-int-st:focus-within .nk-label {
    top: -15px !important;
    font-size: 12px !important;
    color: var(--c-primary) !important;
    font-weight: 600 !important;
}