/* ============================================================
   CloudERP Plus — style.css
   Clean rewrite 2026
   Structure:
     0.  Imports
     1.  CSS Variables (Design Tokens)
     2.  Reset & Base
     3.  Typography
     4.  Layout — Wrapper, Sidebar, Page Content
     5.  Top Navigation Bar
     6.  Left Side Menu
     7.  Hamburger Toggle
     8.  Search Bar (Header)
     9.  Category Nav (store_product)
    10.  Forms & Inputs
    11.  Buttons
    12.  Tables
    13.  Badges & Pills
    14.  Modals
    15.  Alerts
    16.  Utility Classes
    17.  Responsive
   ════════════════════════════════════════════════════════
   ★ New CSS Starts Here (dashboard + NS component styles)
   ════════════════════════════════════════════════════════
    18.  NS Design System — Shared Components
    19.  Dashboard — Admin
    20.  Dashboard — Cards & Stats
    21.  Settings & Status Badges
    22.  Animations
   ============================================================ */


/* ── 0. Imports ────────────────────────────────────────────── */
@import "bootstrap.min.css";


/* ── 1. CSS Variables (Design Tokens) ──────────────────────── */
:root {
    /* NS brand palette */
    --ns-primary:     #1f3a5f;
    --ns-secondary:   #2c5282;
    --ns-accent:      #e8a317;
    --ns-button:      #2b6cb0;
    --ns-border:      #c8d3e0;
    --ns-panel-from:  #e8edf5;
    --ns-panel-to:    #dce4f0;

    /* Sidebar */
    --sidebar-bg:     #2b3a4a;
    --sidebar-width:  270px;
    --sidebar-link:   #ddd;
    --sidebar-hover:  #ff6c00;

    /* Topbar */
    --topbar-height:  70px;
    --topbar-bg:      #fff;

    /* Typography */
    --font-base:      'Open Sans', sans-serif;
    --text-primary:   #2d3748;
    --text-muted:     #718096;
    --text-light:     #a0aec0;

    /* Spacing */
    --radius:         3px;
    --radius-lg:      6px;
}


/* ── 2. Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: #efeeee;
    font-family: var(--font-base);
    font-size: 14px;
    color: var(--text-primary);
    line-height: 22px;
}

table, div { font-family: var(--font-base); font-size: 14px; color: #333; line-height: 22px; }

img  { border: none; max-width: 100%; height: auto; }
p    { margin: 0 0 10px; }
ul   { margin: 0; padding: 0; list-style: none; }
a    { color: #333; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }

article, aside, audio, canvas, details, embed,
figcaption, figure, footer, header, nav,
output, progress, section, video { display: block; }

#myAudio, #myAudioAlert { display: none !important; }

/* Float helpers */
.left, .img-left   { float: left; }
.right, .img-right  { float: right; }
.img-left  { margin-right: 10px; }
.img-right { margin-left:  10px; }

/* Placeholder colour */
::-webkit-input-placeholder { color: #fff; }
::-moz-placeholder          { color: #fff; }
:-ms-input-placeholder      { color: #fff; }
:-moz-placeholder           { color: #fff; }

/* Remove IE select arrow */
::-ms-expand { display: none; }

/* Mobile / desktop toggles */
.mobile, .nav > li.mobile { display: none; }
.desktop                  { display: block; }


/* ── 3. Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 20px;
    font-family: var(--font-base);
    line-height: 1.2;
}
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }

p  { font-size: 14px !important; line-height: 22px !important; font-family: var(--font-base); }

.breadcrumb     { margin-bottom: 15px; color: #666; }
.breadcrumb a   { color: #00003f; }
.breadcrumb a:hover { color: #333; }


/* ── 4. Layout — Wrapper, Sidebar, Page Content ────────────── */
#wrapper {
    margin-left: 0;
    transition: all 0.5s ease;
}
#menu-content {
    position: static;
}
#wrapper.toggled {
    margin-left: calc(-1 * var(--sidebar-width));
}

#sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sidebar-bg);
    transition: all 0.5s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.2);
}
#sidebar-wrapper::-webkit-scrollbar { display: none; }

#wrapper.toggled #sidebar-wrapper { width: var(--sidebar-width); }

#page-content-wrapper {
    width: 100%;
    padding-top: var(--topbar-height);
    min-height: 100vh;
}
/* Do not reposition content when sidebar opens — sidebar overlays */
#wrapper.toggled #page-content-wrapper { position: static; }

/* Content area */
/* Content column — full width with breathing room on left and right */
.home .col-sm-9.product_right.gray {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    transition: padding-left 0.5s ease;
}
/* When sidebar is open, push content right so it's not obscured */
#wrapper.toggled .home .col-sm-9.product_right.gray {
    padding-left: calc(var(--sidebar-width) + 24px);
}
/* Hide the legacy col-sm-3 sidebar placeholder — layout is handled by #sidebar-wrapper */
.home .col-sm-3.sidebar { display: none; }
#content { min-height: calc(100vh - var(--topbar-height)); }


/* ── Overlay (closes sidebar on outside click) ──────────────── */
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 9998;
}
#wrapper.toggled .overlay {
    display: block;
}

/* ── 5. Top Navigation Bar ──────────────────────────────────── */

/* The top navbar uses Bootstrap .navbar-inverse.
   container-fluid holds: logo + search (left)
   left_menu_main sits AFTER container-fluid as a sibling.
   We make the outer nav a flex row so both sit side by side. */

.navbar.navbar-inverse {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: var(--topbar-height);
    background: var(--topbar-bg) !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 0 16px 0 60px;
    margin: 0;
}

/* But NOT the sidebar navs which also have .navbar-inverse */
nav.left_menu.navbar-inverse,
nav.left_menu .navbar-inverse,
nav.left_menu .navbar,
#sidebar-wrapper.navbar-inverse {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    background: var(--sidebar-bg) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: unset !important;
}

/* container-fluid: logo + search (fixed 50% width) */
.navbar.navbar-inverse > .container-fluid {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
}

/* Logo */
.navbar-brand {
    height: auto;
    padding: 0 8px 0 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.navbar-brand img { width: 70px !important; height: auto; }

/* Search container */
.search-container {
    flex: 0 0 auto;
    width: 50%;
    max-width: 560px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.search-container form,
#formsearchmain {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.category-list { flex-shrink: 0; }

.filter.show select {
    height: 34px;
    padding: 0 26px 0 8px;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    font-size: 13px;
    background: #fff;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d3748' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
    cursor: pointer;
    max-width: 155px;
}
.search-container input[type="text"] {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    font-size: 13px;
    min-width: 100px;
}
.search-container button[type="submit"] {
    height: 34px; width: 34px;
    padding: 0;
    background: var(--ns-button);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.search-container button[type="submit"] i,
.search-container button[type="submit"] .icofont-search-2 {
    font-size: 16px;
    color: #fff;
    display: block;
    line-height: 1;
}
.search-container button[type="submit"]:hover { background: var(--ns-primary); }

/* Right side: Dashboard/Logout links + cart
   left_menu_main is a sibling of container-fluid, sits in the flex row */
.left_menu_main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0;
}
.mymenu {
    display: flex;
    align-items: center;
    gap: 6px;
}
#drop_menu { height: auto !important; }
#drop_menu > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0; padding: 0;
    list-style: none;
}
#drop_menu > ul > li { display: flex; float: none; position: static; }
#drop_menu > ul > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    height: 32px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    color: var(--ns-primary) !important;
    text-decoration: none;
    border: 1px solid var(--ns-border);
    background: #f7f9fc;
    white-space: nowrap;
    line-height: 1;
    transition: all .15s;
}
#drop_menu > ul > li > a:hover {
    background: var(--ns-button);
    color: #fff !important;
    border-color: var(--ns-button);
    text-decoration: none;
}

/* Mini cart */
.mini_cart { position: relative; display: flex; align-items: center; }
.mini_cart.mobile { display: none; }
.mini_cart_click {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    background: #f7f9fc;
    color: var(--ns-primary);
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.mini_cart_click:hover { background: var(--ns-button); border-color: var(--ns-button); }
.mini_cart_click img   { width: 18px !important; height: auto; }
.mini_cart_click .cnt  { font-size: 12px; font-weight: 700; color: var(--ns-primary); }
.mini_cart_click:hover .cnt { color: #fff; }

/* Dropdown from mini_cart */
.mini_cart_html {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    min-width: 260px;
    z-index: 9999;
    padding: 10px;
}
.mini_cart:hover .mini_cart_html { display: block; }

/* Jumbotron */
.jumbotron { padding: 0; }
.jumbotron .container { max-width: 100%; height: 100%; }

/* ── 6. Left Side Menu ──────────────────────────────────────── */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 220px;
    margin: 0; padding: 0;
    list-style: none;
}
.sidebar-nav li {
    position: relative;
    line-height: 20px;
    display: inline-block;
    width: 100%;
}
.sidebar-nav li::before {
    content: '';
    position: absolute;
    top: 0; left: 0; z-index: -1;
    height: 100%; width: 0;
    background-color: var(--sidebar-hover);
    transition: width 0.2s ease-in;
}
.sidebar-nav li:hover::before,
.sidebar-nav li.open:hover::before {
    width: 100%;
    transition: width 0.2s ease-in;
}
.sidebar-nav li a {
    display: block;
    color: var(--sidebar-link);
    text-decoration: none;
    padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
    color: var(--sidebar-bg);
    text-decoration: none;
    background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 20px;
    line-height: 44px;
}
.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%; padding: 0; margin: 0;
    border-radius: 0; border: none;
    background-color: #222;
    box-shadow: none;
}




/* ── Left Side Menu — Inner Nav (Section 6b) ───────────────────
   Classes used by leftside_menu.php inside #sidebar-wrapper
   ─────────────────────────────────────────────────────────────── */

/* ── Sidebar — outer nav.left_menu is the slide-in panel ── */
nav.left_menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--sidebar-bg) !important;
    z-index: 9999 !important;
    transition: width 0.5s ease !important;
    border: none !important;
    box-shadow: 2px 0 12px rgba(0,0,0,.2) !important;
    padding: 0 !important;
    margin: 0 !important;
}
#wrapper.toggled nav.left_menu {
    width: var(--sidebar-width) !important;
}

/* Inner column that holds the menu list */
nav.left_menu .col-sm-3.sidebar,
nav.left_menu #topheader {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width);
    padding: 0;
    float: none;
    display: block;
}

/* Bootstrap navbar reset inside sidebar */
nav.left_menu .navbar,
nav.left_menu .navbar-default,
nav.left_menu .navbar-inverse {
    background: transparent !important;
    border: none !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: static !important;
    width: auto !important;
}
nav.left_menu .navbar-collapse,
nav.left_menu .collapse.navbar-collapse,
nav.left_menu .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    padding: 0;
    overflow: visible !important;
}

/* Nav list */
/* Hide person_name in sidebar — shown in topbar instead */
nav.left_menu .person_name { display: flex; background: var(--sidebar-bg); padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 4px; color: #fff; font-size: 13px; font-weight: 600; }

nav.left_menu .nav.navbar-nav {
    width: 100%;
    margin: 0;
    padding: 8px 0;
    float: none;
}
nav.left_menu .nav.navbar-nav > li {
    display: block;
    width: 100%;
    float: none;
}

/* Menu item buttons */
nav.left_menu .nav.navbar-nav > li > a.btn,
nav.left_menu .nav.navbar-nav > li > a.btn-secondary {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 20px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--sidebar-link) !important;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: visible;
    box-shadow: none !important;
    transition: background .15s, color .15s;
}
nav.left_menu .nav.navbar-nav > li > a.btn:hover,
nav.left_menu .nav.navbar-nav > li > a.btn-secondary:hover,
nav.left_menu .nav.navbar-nav > li.open > a.btn {
    background: var(--sidebar-hover) !important;
    color: #fff !important;
    text-decoration: none;
}

/* ── Sidebar menu indicators & active states ── */

/* All menu links — reset border so we can control it */
nav.left_menu .nav.navbar-nav > li > a.btn,
nav.left_menu .nav.navbar-nav > li > a.btn-secondary {
    border-left: 3px solid transparent !important;
}

/* CSS-only chevron — no icon font dependency */
nav.left_menu .sb-chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid rgba(255,255,255,.4);
    border-bottom: 2px solid rgba(255,255,255,.4);
    transform: rotate(45deg);
    transition: transform .25s ease, border-color .25s;
    position: relative;
    top: -2px;
}

/* Chevron points up when open */
nav.left_menu .nav.navbar-nav > li.open > a .sb-chevron {
    transform: rotate(-135deg);
    top: 2px;
    border-color: var(--ns-accent);
}

/* CSS-only chevron arrow */
nav.left_menu .sb-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid rgba(255,255,255,.4);
    border-bottom: 2px solid rgba(255,255,255,.4);
    transform: rotate(45deg);
    transition: transform .25s ease, border-color .25s;
    position: relative;
    top: -2px;
}
/* Chevron flips up when open */
nav.left_menu .nav.navbar-nav > li.open > a .sb-chevron {
    transform: rotate(-135deg);
    top: 3px;
    border-color: var(--ns-accent);
}

/* Open parent group — highlighted */
nav.left_menu .nav.navbar-nav > li.open > a.btn,
nav.left_menu .nav.navbar-nav > li.open > a.btn-secondary {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border-left: 3px solid var(--ns-accent) !important;
}

/* Submenu container */
nav.left_menu .sub_menu.dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    background: rgba(0,0,0,.18);
    border: none !important;
    border-radius: 0 !important;
    border-left: 3px solid rgba(232,163,23,.4) !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    display: none;
}
/* Show submenu when parent li has .open */
nav.left_menu .nav.navbar-nav > li.open > .sub_menu.dropdown-menu {
    display: block !important;
}

/* Submenu items */
nav.left_menu .sub_menu.dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    padding: 9px 16px 9px 30px !important;
    font-size: 12.5px !important;
    color: rgba(255,255,255,.6) !important;
    text-decoration: none !important;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    transition: all .15s;
}
nav.left_menu .sub_menu.dropdown-menu > li > a::before {
    content: '–';
    margin-right: 8px;
    font-size: 10px;
    color: rgba(255,255,255,.25);
    flex-shrink: 0;
}
nav.left_menu .sub_menu.dropdown-menu > li > a:hover {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
}

/* Active submenu item */
nav.left_menu .sub_menu.dropdown-menu > li.active > a {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
    border-left: 3px solid var(--ns-accent) !important;
    font-weight: 600 !important;
}
nav.left_menu .sub_menu.dropdown-menu > li.active > a::before {
    color: var(--ns-accent);
}

/* Active top-level item (direct link, no submenu) */
nav.left_menu .nav.navbar-nav > li.active > a.btn {
    background: var(--ns-button) !important;
    color: #fff !important;
    border-left: 3px solid var(--ns-accent) !important;
}

/* ── 7. Hamburger Toggle ────────────────────────────────────── */
.hamburger {
    position: fixed;
    top: 17px;
    left: 12px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active { outline: none; }

.hamburger.is-closed,
.hamburger.is-open { transition: all 0.5s ease; }

.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open   .hamb-top,
.hamburger.is-open   .hamb-middle,
.hamburger.is-open   .hamb-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 3px; width: 61%;
    margin: auto;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom { background-color: var(--sidebar-bg); }

.hamburger.is-closed .hamb-top    { top: 8px;    transition: all 0.35s ease-in-out; }
.hamburger.is-closed .hamb-middle { top: 50%;    margin-top: -1px; }
.hamburger.is-closed .hamb-bottom { bottom: 7px; transition: all 0.35s ease-in-out; }

.hamburger.is-open {
    position: fixed;
    left: calc(var(--sidebar-width) + 8px) !important;
    top: 18px;
    z-index: 99999;
    background: var(--sidebar-bg);
    border-color: rgba(255,255,255,.2);
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom { background-color: #e74c3c; }

.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom { top: 50%; margin-top: -2px; }

.hamburger.is-open .hamb-top {
    transform: rotate(45deg);
    transition: transform 0.2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
    transform: rotate(-45deg);
    transition: transform 0.2s cubic-bezier(.73,1,.28,.08);
}


/* ── 8. Search Bar (Header) ─────────────────────────────────── */
/* Search container rules consolidated in Section 5 (navbar) */
#formsearchmain { display: flex; align-items: center; gap: 6px; width: 100%; }
.category-list { float: none; display: block; flex-shrink: 0; }

.filter.show select {
    padding: 7px 28px 7px 10px;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    font-size: 13px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d3748' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 16px;
    cursor: pointer;
    min-width: 150px;
}


/* ── 9. Category Nav (store_product page) ───────────────────── */
.sd-cat-nav { background: var(--ns-panel-from); border-bottom: 1px solid var(--ns-border); overflow-x: auto; }
.sd-cat-nav-inner { display: flex; align-items: center; gap: 4px; padding: 8px 16px; flex-wrap: nowrap; min-width: max-content; }

.sd-cat-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ns-secondary);
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all .15s;
    white-space: nowrap;
}
.sd-cat-link:hover, .sd-cat-link.active {
    background: var(--ns-button);
    color: #fff;
    border-color: var(--ns-primary);
    text-decoration: none;
}
.sd-cat-link-all { border-color: var(--ns-border); }

/* 3-level dropdown */
.sd-cat-dropdown             { position: relative; display: inline-block; }
.sd-cat-dropdown-menu        { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--ns-border); border-radius: var(--radius); min-width: 190px; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.sd-cat-dropdown:hover > .sd-cat-dropdown-menu { display: block; }
.sd-cat-dropdown-menu a      { display: block; padding: 7px 14px; font-size: 12.5px; color: var(--text-primary); text-decoration: none; }
.sd-cat-dropdown-menu a:hover { background: var(--ns-panel-from); color: var(--ns-button); }

.sd-cat-l2-item              { position: relative; }
.sd-cat-l3-menu              { display: none; position: absolute; top: 0; left: 100%; background: #fff; border: 1px solid var(--ns-border); border-radius: var(--radius); min-width: 180px; z-index: 10000; box-shadow: 4px 4px 12px rgba(0,0,0,.12); }
.sd-cat-l2-item:hover > .sd-cat-l3-menu { display: block; }
.sd-cat-l2-item > a.has-l3::after { content: " ▸"; font-size: 10px; color: var(--text-light); float: right; }
.sd-cat-l3-menu a            { display: block; padding: 7px 14px; font-size: 12px; color: #4a5568; text-decoration: none; }
.sd-cat-l3-menu a:hover      { background: var(--ns-panel-from); color: var(--ns-button); }


/* ── 10. Forms & Inputs ─────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    font-family: var(--font-base);
    font-size: 13px;
    color: var(--text-primary);
}

.form-check { text-align: left; }

/* NS input standard */
.ns-input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--ns-border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-primary);
    background: #fff;
    box-sizing: border-box;
    font-family: var(--font-base);
}
.ns-input:focus {
    border-color: var(--ns-button);
    outline: none;
    box-shadow: 0 0 0 2px rgba(43,108,176,.12);
}

/* Select with chevron */
select.ns-input,
.ns-fg select,
#content select.ns-input,
#content .ns-filter-bar select,
#content .ns-panel select,
#content .ns-body select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d3748' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
    cursor: pointer;
    border: 1.5px solid #a0aec0 !important;
}
select.ns-input:focus,
.ns-fg select:focus,
#content select.ns-input:focus { border-color: var(--ns-button) !important; outline: none !important; }


/* ── 11. Buttons ────────────────────────────────────────────── */
.ns-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    font-family: var(--font-base);
    transition: filter .15s;
}
.ns-btn:hover           { filter: brightness(.9); text-decoration: none; color: #fff; }
.ns-btn-primary         { background: linear-gradient(180deg, var(--ns-button), var(--ns-secondary)); border: 1px solid var(--ns-primary); }
.ns-btn-green           { background: #27ae60; border: 1px solid #1e8449; }
.ns-btn-red             { background: #e74c3c; border: 1px solid #c0392b; }
.ns-btn-orange          { background: #e67e22; border: 1px solid #ca6f1e; }
.ns-btn-secondary       { background: #fff; color: var(--text-primary) !important; border: 1.5px solid var(--ns-border); }
.ns-btn-outline         { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.5); }
.ns-btn-outline:hover   { color: #fff; }
.ns-btn-secondary:hover { filter: brightness(.95); }

/* Legacy on-demand / help button styles */
.on-demand-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(40,167,69,.3);
    text-decoration: none;
}
.on-demand-btn:hover   { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(40,167,69,.4); color: #fff; text-decoration: none; }
.on-demand-disabled    { display: inline-block; padding: 10px 20px; border-radius: 40px; background: #e9ecef; color: #6c757d; font-size: 13px; }


/* ── 12. Tables ─────────────────────────────────────────────── */
/* Legacy responsive table */
.table { border-collapse: collapse; margin: 10px 0; width: 100%; }
.table th { background: #002f92; border-right: 1px solid #fff; font-weight: normal; padding: 13px 8px; color: #fff; }
.table td { background: #f1f1f1; border-left: 1px solid #fff; border-right: 1px solid #fff; padding: 8px; border-bottom: 1px solid #fff; }
.table tr:hover td { background: #d9f5f8; }

/* NS table (new pages) */
.ns-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ns-table thead th {
    background: var(--ns-secondary);
    padding: 6px 8px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    border-bottom: 2px solid var(--ns-accent);
    white-space: nowrap;
}
.ns-table tbody td    { padding: 5px 8px; border-bottom: 1px solid #edf0f5; color: var(--text-primary); vertical-align: middle; }
.ns-table tbody tr:hover td { background: #f7f9fc; }

/* Dashboard panels */
.db-panel     { background: #fff; border: 1px solid var(--ns-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0; }
.db-panel-hdr {
    background: linear-gradient(180deg, var(--ns-panel-from), var(--ns-panel-to));
    border-bottom: 1px solid var(--ns-border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.db-panel-hdr h3   { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ns-primary); text-transform: uppercase; letter-spacing: .5px; }
.db-panel-hdr a    { font-size: 12px; color: var(--ns-button); text-decoration: none; font-weight: 600; }
.db-panel-hdr a:hover { text-decoration: underline; }

/* Dashboard table */
.db-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.db-table th { background: var(--ns-secondary); padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .4px; border-bottom: 2px solid var(--ns-accent); white-space: nowrap; }
.db-table td { padding: 9px 12px; border-bottom: 1px solid #edf0f5; color: var(--text-primary); vertical-align: middle; }
.db-table tr:last-child td { border-bottom: none; }
.db-table tr:hover td { background: #f7f9fc; }
.db-td-amt { font-weight: 600; }


/* ── 13. Badges & Pills ─────────────────────────────────────── */
/* NS badge (order status) */
.db-badge             { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 600; }
.db-badge-1           { background: #fff3cd; color: #856404; }   /* Pending */
.db-badge-2           { background: #cce5ff; color: #004085; }   /* Picking */
.db-badge-3           { background: #d4edda; color: #155724; }   /* Picked */
.db-badge-4           { background: #d1ecf1; color: #0c5460; }   /* Invoice */
.db-badge-5           { background: #d4edda; color: #155724; }   /* Complete */
.db-badge-6           { background: #f8d7da; color: #721c24; }   /* Cancelled */
.db-badge-7           { background: #e2e3e5; color: #383d41; }   /* Ordered */
.db-badge-8           { background: #fce4ec; color: #880e4f; }   /* Pending Conf */

/* Settings status badges */
.status-badge {
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    box-shadow: 0 2px 5px rgba(0,0,0,.05);
    transition: all .3s ease;
    display: inline-block;
}
.status-badge i { margin-right: 5px; }
.status-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.1); }

.status-badge-enabled  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-badge-disabled { background: #e9ecef; color: #6c757d; border: 1px solid #dee2e6; }
.status-badge-warning  { background: #fff3e0; color: #856404; border: 1px solid #ffeeba; }
.status-badge-danger   { background: #fce4ec; color: #721c24; border: 1px solid #f5c6cb; }

/* Category hierarchy pills */
.cat-l1-name { font-size: 12.5px; font-weight: 700; color: var(--ns-primary); }
.cat-l2-name { font-size: 12px; font-weight: 600; color: #2c5282; padding-left: 18px; }
.cat-l3-name { font-size: 11.5px; font-weight: 400; color: #4a5568; padding-left: 36px; }
.cat-indent-l2::before { content: "├ "; color: var(--text-light); font-size: 11px; }
.cat-indent-l3::before { content: "└ "; color: #c4cdd6; font-size: 11px; }


/* ── 14. Modals ─────────────────────────────────────────────── */
.help-modal .modal-content  { border-radius: var(--radius-lg); overflow: hidden; }
.help-modal .modal-header   { background: linear-gradient(135deg, var(--ns-primary), var(--ns-secondary)); color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.help-section-content       { background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 15px; }
.help-section-content h6    { color: var(--ns-button); margin-bottom: 10px; }


/* ── 15. Alerts ─────────────────────────────────────────────── */
.ns-alert-error {
    background: #fdf0f0; color: #8b1a1a;
    border: 1px solid #f5c6cb;
    border-radius: var(--radius);
    padding: 10px 16px; margin-bottom: 16px;
    font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.ns-alert-success {
    background: #eaf7ee; color: #1a6b34;
    border: 1px solid #b7dfca;
    border-radius: var(--radius);
    padding: 10px 16px; margin-bottom: 16px;
    font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}

.custom-alert {
    border: none;
    border-radius: var(--radius-lg);
    padding: 15px 20px; margin-bottom: 20px;
    animation: slideDown .3s ease;
}
.custom-alert-success { background: linear-gradient(135deg, #d4edda, #c3e6cb); color: #155724; }
.custom-alert-error   { background: #fce4ec; color: #721c24; border-left: 4px solid #dc3545; }
.custom-alert-info    { background: linear-gradient(135deg, #cce5ff, #b8daff); color: #004085; }


/* ── 16. Utility Classes ────────────────────────────────────── */
.mb20  { margin-bottom: 20px; }
.mb16  { margin-bottom: 16px; }
.mb12  { margin-bottom: 12px; }
.mt12  { margin-top: 12px; }
.p0    { padding: 0; }

.db-link       { color: var(--ns-button); text-decoration: none; font-weight: 600; }
.db-link:hover { text-decoration: underline; }
.db-muted      { color: var(--text-muted); font-size: 12px; }
.db-empty      { padding: 28px; text-align: center; color: var(--text-light); font-size: 13px; }

.btn-text { margin-left: 12px; font-size: 12px; color: #6c757d; }

/* Login page */
.all_store_pro { padding: 20px; }


/* ── 17. Responsive ─────────────────────────────────────────── */
@media (min-width: 1200px) { /* Desktop */ }

@media (max-width: 991px) {
    .person_name { width: 100%; font-size: 18px; min-height: auto; padding: 14px 20px; }
}

@media (max-width: 768px) {
    .mobile, .nav > li.mobile { display: block; }
    .desktop { display: none; }

    .dashboard-card { min-width: 100%; max-width: 100%; }
    .cards-row      { flex-direction: column; align-items: center; }
    .top-bar        { flex-direction: column; align-items: flex-start; }
    .db-stats-4     { grid-template-columns: 1fr 1fr; }
    .sys-grid       { grid-template-columns: 1fr 1fr; }
    .db-cols,
    .db-cols-2-1,
    .db-cols-1-2    { grid-template-columns: 1fr; }
    .ns-filter-bar  { flex-direction: column; }
}

@media (max-width: 480px) {
    .db-stats-4     { grid-template-columns: 1fr; }
    .sys-grid       { grid-template-columns: 1fr; }
    .db-actions     { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   ★ New CSS Starts Here
   All new page/component styles added below this line.
   Page-specific and dashboard styles live here.
   ══════════════════════════════════════════════════════════════ */