@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap');
:root{
    /* colors */
    --color-primary: #F2822E;
    --color-secondary: #FDE9C6;
    --color-orange: #F2822E;
    --color-orange-dark: #db7323;
    --color-orange-light: #F3812D36;
    --color-light-grey: rgba(0, 0, 0, 0.06);
    --color-grey: rgb(110, 110, 110);
    /* main theme color */
    --color-main-theme: #F2822E;
    --color-theme-red: #CE2031;
}
body{
    font-family: "K2D", sans-serif;
}

a.nav-link{
    color: var(--color-orange);
}
.nav-pills .nav-link:not(.active):hover{
    color: var(--color-orange);
}
.nav-pills .nav-link.active{
    background-color: var(--color-orange);
}

/* ============================================================
   ADMIN SIDEBAR STRUCTURE
   Guarantee the sidebar renders at its full width with readable
   labels in the expanded (non-collapsed) desktop state. This
   guards against a half-collapsed render where the labels were
   clipped to icon width ("Dash", "Prod"…) and the content area
   left a large gap. Values match AdminLTE's own defaults, and the
   rules are scoped to the expanded state + desktop, so the
   collapse (hamburger) toggle and mobile off-canvas behaviour are
   left untouched.
============================================================ */
@media (min-width: 992px) {
    body.sidebar-mini:not(.sidebar-collapse) .main-sidebar,
    body.sidebar-mini:not(.sidebar-collapse) .main-sidebar::before {
        width: 250px;
    }
    body.sidebar-mini:not(.sidebar-collapse) .nav-sidebar .nav-link p {
        width: auto;
        margin-left: 0;
        opacity: 1;
        visibility: visible;
        display: inline-block;
        white-space: normal;
    }
}

/* ============================================================
   SIDEBAR: OPAQUE BACKGROUND
   .main-sidebar has no background-color anywhere in adminlte.min.css
   — the shipped "sidebar-dark-*"/"sidebar-light-*" theme classes only
   style nested elements (.brand-link, nav-links), never the sidebar
   container itself, and neither admin/template.php nor
   seller/template.php apply one of those classes to <body> anyway.
   Net effect: the sidebar is fully transparent. It looks fine on a
   short page, but the moment a page is tall enough to scroll, the
   main content scrolls up underneath the fixed sidebar and shows
   straight through it — main-content headings appear to "overlap"
   the sidebar's nav items. Confirmed live (not a per-page bug) via a
   scrolled screenshot on both /seller/manage_stock and /seller/orders.
============================================================ */
.main-sidebar {
    background-color: #fff;
}

/* ============================================================
   ADMIN SIDEBAR: CLEAR THE BRAND LOGO FLOAT
   Root cause of the clipped-label bug above (verified live):
   AdminLTE floats .brand-image left with max-height:33px/width:auto.
   That's sized for a small square icon, but Cretzo's uploaded logo
   is a wide wordmark (2085x532), so at 33px tall it renders ~130px
   wide. .brand-link never clears its own float, so the float
   escapes past .brand-link's short box into the .sidebar nav list
   below. .sidebar establishes its own block-formatting-context
   (overflow:hidden, via OverlayScrollbars' os-host-overflow class),
   so per spec it shrinks to avoid overlapping that stray float —
   squeezing the whole nav column down to ~92px and truncating every
   label ("Dashboard" -> "Dash"). Giving .brand-link a BFC of its own
   contains the float inside it instead of letting it leak out.
============================================================ */
.brand-link {
    overflow: hidden;
}
/* ============================================================
   SIDEBAR: ACTIVE / HOVER COLORS
   The admin body carries AdminLTE's own "sidebar-light-primary" skin
   class, which ships its own active/hover colors at a HIGHER CSS
   specificity than a plain ".nav-sidebar .nav-link.active" rule ever
   had:
     .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active
       { background-color:#007bff; color:#fff }               (top level: Bootstrap blue)
     [class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link.active
       { background-color:rgba(0,0,0,.1); color:#212529 }     (submenu items: grey)
     [class*=sidebar-light-] .nav-sidebar>.nav-item.menu-open>.nav-link
       { background-color:rgba(0,0,0,.1); color:#212529 }     (an OPEN section header: grey)
   All three have more class/attribute steps than a plain override,
   so they always won the cascade regardless of source order.
   !important on every property below is the reliable way to beat a
   third-party skin's own selectors here. */

/* The current page's own link: a light tint block, matching :hover exactly - a solid,
   fully-saturated fill read as too heavy against the rest of the sidebar. The tint sits on
   the <a> only; the icon stays transparent so it doesn't paint a second block inside it. */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--color-orange-light) !important;
    color: var(--color-orange-dark) !important;
}
.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    background-color: transparent !important;
    color: var(--color-orange-dark) !important;
}
.nav-sidebar .nav-link.active:hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: var(--color-orange-light) !important;
    color: var(--color-orange-dark) !important;
}

/* An open section's own heading (e.g. "Orders" expanded to reveal its children) should read
   the same as any other, closed heading - only the chevron rotating indicates it's open. This
   only ever applies when that heading is NOT itself the active page (:not(.active) - a page
   that is both the open section's own link is covered by the .active rule above instead). */
.nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
    background-color: transparent !important;
    color: var(--color-orange) !important;
}

/* Hover on a non-active link: AdminLTE's own submenu hover
   ([class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link:hover)
   paints a flat grey background with no theme color at all. Matched
   and overridden here so hovering any sidebar item - top level or
   nested - gives the same, on-brand feedback. */
.nav-sidebar .nav-link:not(.active):hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link:not(.active):hover {
    background-color: var(--color-orange-light) !important;
    color: var(--color-orange-dark) !important;
}
.nav-sidebar .nav-link:not(.active):hover .nav-icon {
    color: var(--color-orange-dark) !important;
}


/* --- --- Style for Bootstrap Tables, fixed row heights with scrollable cells --- --- */

.table-striped.fixed-row-height{
    width: auto !important;
    table-layout: auto !important;
}

/* ! Note: must set width of table header(th) and table data (td) both to assure that it is set appropriately */

.table-striped.fixed-row-height thead th,
.table-striped.fixed-row-height tbody td,
.table-striped.fixed-row-height tfoot th,
.table-striped.fixed-row-height tfoot td {
  width: auto !important;
}

/* Make cell content scrollable if it overflows */
.bootstrap-table .fixed-row-height td {
    max-height: 60px;
    overflow-y: auto;
    vertical-align: top;
    white-space: nowrap;
}

.bootstrap-table .fixed-row-height td:hover {
    overflow-x: auto;
}
/* ============================================================
   NOTIFICATION PANEL HEADER (admin navbar bell)
   The panel (#list) is filled by custom.js, which now puts a
   title row with a close button at the top of it. The bell's
   panel is not a Bootstrap-managed dropdown (its menu is not a
   child of a common .dropdown), so this button and the
   outside-click handler in custom.js are what close it.
============================================================ */
#list .notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-grey);
}

#list .notification-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-grey);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

#list .notification-close:hover,
#list .notification-close:focus {
    background: var(--color-orange-light);
    color: var(--color-orange);
    outline: 0;
}

#list .loading-message {
    padding: 1rem;
    text-align: center;
    color: var(--color-grey);
}

/* ============================================================
   SELLER / ADMIN TOP NAVBAR (application/views/seller/include-navbar.php)
   The header used to show a bare `fa fa-user fa-2x` glyph that sat
   taller than the navbar and pushed the row out of alignment, plus a
   dropdown made of three empty dividers. This styles the replacement:
   flat icon buttons on the left, an initial-avatar identity chip on
   the right, and a real dropdown with a header row.
============================================================ */
.czp-navbar {
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    padding-left: .5rem;
    padding-right: .75rem;
}

/* Flat, square-ish icon buttons (hamburger, bell) */
.czp-navbar .czp-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
     background: var(--color-orange-light);
    color: var(--color-orange);
    font-size: 17px;
    line-height: 1;
    transition: background .15s, color .15s;
}

/* .czp-navbar .czp-nav-icon:hover,
.czp-navbar .czp-nav-icon:focus {
    background: var(--color-orange-light);
    color: var(--color-orange);
} */

/* Breathing room between the right-hand controls. Bootstrap's navbar puts
   no spacing between adjacent .nav-item children, so the language select,
   the bell and the account chip were touching each other. */
.czp-navbar .navbar-nav.ml-auto > .nav-item + .nav-item {
    margin-left: .35rem;
}

/* Unread count on the bell.
   It used to sit at top:2px/right:0 INSIDE the 38px button, so a two-digit
   count ("62") spilled left across the bell glyph itself. Anchoring it to
   the button's top-right corner and letting it overhang puts it clear of
   the icon at any width. */
.czp-navbar .czp-nav-icon {
    overflow: visible;
}

.czp-navbar .czp-nav-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    transform: translate(35%, -35%);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--color-theme-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
}

/* Demo-mode pill (admin header only) */
.czp-navbar .czp-demo-pill {
    display: inline-block;
    margin-left: .35rem;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(206, 32, 49, .1);
    color: var(--color-theme-red);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ---- LANGUAGE PICKER (admin header) ----
   Google's widget is kept in the DOM but taken out of the layout: it is the
   thing that performs the translation, and removing it would break that,
   but its native <select> popup cannot be styled and its ~250-entry list is
   unusable at header size. The Bootstrap dropdown in include-navbar.php is
   mirrored from it by custom.js and is what the user actually sees.
   Not display:none - Google's script measures the element, and a display:none
   host has made the widget fail to initialise. Clipped instead. */
.czp-translate-host {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    pointer-events: none;
}

/* Toggle: a quiet pill matching the account chip's height. Fixed 200px so
   it lines up with the menu below it instead of resizing with whatever
   language name is selected - "Original (English)" and "Ga" would otherwise
   give the header two very different widths. */
.czp-navbar .czp-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    width: 200px;
    height: 34px;
    padding: 0 .65rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #fff;
    color: #343a40;
    font-size: 13px;
    line-height: 1;
}

.czp-navbar .czp-lang-toggle:hover,
.czp-navbar .czp-lang-toggle:focus,
.czp-navbar .czp-lang.show .czp-lang-toggle {
    border-color: var(--color-orange);
    color: var(--color-orange-dark);
    outline: none;
    box-shadow: none;
}

.czp-navbar .czp-lang-toggle .fa-globe {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--color-orange);
}

.czp-navbar .czp-lang-current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czp-navbar .czp-lang-caret {
    flex: 0 0 auto;
    font-size: 9px;
    color: var(--color-grey);
    transition: transform .15s;
}

.czp-navbar .czp-lang.show .czp-lang-caret {
    transform: rotate(180deg);
}

/* Menu: search box pinned at the top, options scrolling under it. Same
   200px as the toggle above it. */
.czp-lang-menu {
    width: 200px;
    margin-top: .4rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.czp-lang-search {
    position: relative;
    padding: .6rem;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    background: #fff;
}

.czp-lang-search .fa-search {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--color-grey);
    pointer-events: none;
}

.czp-lang-search .form-control {
    height: 34px;
    padding-left: 2.1rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: var(--color-light-grey);
    font-size: 13px;
    box-shadow: none;
}

.czp-lang-search .form-control:focus {
    border-color: var(--color-orange);
    background: #fff;
    box-shadow: none;
}

.czp-lang-list {
    max-height: 300px;
    padding: .25rem 0;
    overflow-y: auto;
    /* Thin scrollbar so a 250-row list does not put a chunky native bar
       inside a 260px menu. */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .2) transparent;
}

.czp-lang-list::-webkit-scrollbar {
    width: 6px;
}

.czp-lang-list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0, 0, 0, .18);
}

.czp-lang-item {
    display: block;
    width: 100%;
    padding: .45rem 1rem;
    border: 0;
    background: transparent;
    font-size: 13.5px;
    color: #343a40;
    text-align: left;
    cursor: pointer;
}

.czp-lang-item:hover,
.czp-lang-item:focus {
    background: var(--color-orange-light);
    color: var(--color-orange-dark);
    outline: none;
}

/* The language currently applied to the page, with a tick in the gutter. */
.czp-lang-item.is-active {
    position: relative;
    padding-left: 1.9rem;
    background: transparent;
    color: var(--color-orange-dark);
    font-weight: 700;
}

.czp-lang-item.is-active::before {
    content: "✓";
    position: absolute;
    left: .85rem;
    font-weight: 700;
}

.czp-lang-empty {
    padding: .9rem 1rem;
    color: var(--color-grey);
    font-size: 13px;
    text-align: center;
}

/* Google injects a top banner-frame and shifts <body> down by 40px when a
   language is active; it also re-styles anything with .skiptranslate. The
   banner is suppressed so the header does not jump. */
.goog-te-banner-frame,
.skiptranslate > iframe {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Notification panel: match the account dropdown's frame. */
.czp-notif-dropdown {
    margin-top: .4rem;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

/* Identity chip */
/* Deliberately no hover/focus/open background on the chip: the avatar
   and name are already the affordance, and every tinted or grey fill
   tried here read as a stray highlight in the header. */
.czp-navbar .czp-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 38px;
    padding: 0 .6rem 0 .25rem;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #343a40;
}

.czp-navbar .czp-user-toggle:hover,
.czp-navbar .czp-user-toggle:focus,
.czp-navbar .czp-user-menu.show .czp-user-toggle {
    background: transparent;
    color: #343a40;
    outline: none;
    box-shadow: none;
}

.czp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.czp-avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 18px;
}

.czp-navbar .czp-user-name {
    max-width: 150px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czp-navbar .czp-user-caret {
    font-size: 10px;
    color: var(--color-grey);
    transition: transform .15s;
}

.czp-navbar .czp-user-menu.show .czp-user-caret {
    transform: rotate(180deg);
}

/* Dropdown */
.czp-user-dropdown {
    min-width: 250px;
    margin-top: .4rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.czp-user-dropdown .dropdown-divider {
    margin: 0;
}

.czp-user-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    background: var(--color-secondary);
}

.czp-user-head-text {
    min-width: 0;
    line-height: 1.25;
}

.czp-user-head-text strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.czp-user-head-text small {
    color: var(--color-grey);
    font-size: 11.5px;
}

.czp-user-dropdown .czp-user-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    font-size: 14px;
    color: #343a40;
}

.czp-user-dropdown .czp-user-item i {
    width: 16px;
    font-size: 15px;
    color: var(--color-grey);
    text-align: center;
}

.czp-user-dropdown .czp-user-item:hover,
.czp-user-dropdown .czp-user-item:focus {
    background: var(--color-orange-light);
    color: var(--color-orange-dark);
}

.czp-user-dropdown .czp-user-item:hover i {
    color: var(--color-orange-dark);
}

.czp-user-dropdown .czp-user-item-danger:hover,
.czp-user-dropdown .czp-user-item-danger:focus {
    background: rgba(206, 32, 49, .08);
    color: var(--color-theme-red);
}

.czp-user-dropdown .czp-user-item-danger:hover i {
    color: var(--color-theme-red);
}