/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Web Guy
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2026
BlankSlate is distributed under the terms of the GNU GPL
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

html {
    scroll-behavior: smooth
}

body {
    line-height: 1
}

a {
    text-decoration-skip-ink: auto
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none
}

button {
    outline: 0;
    border-radius: var(--radius);
    background: var(--accent);
    border: none;
    color: var(--text);
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

button:hover{
    background: var(--accent-light);
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

q {
    display: inline;
    font-style: italic
}

q:before {
    content: '"';
    font-style: normal
}

q:after {
    content: '"';
    font-style: normal
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="password"] {
    appearance: none;
    border-radius: 0
}

input[type="search"] {
    appearance: textfield
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

th,
td {
    padding: 2px
}

big {
    font-size: 120%
}

small,
sup,
sub {
    font-size: 80%
}

sup {
    vertical-align: super
}

sub {
    vertical-align: sub
}

dd {
    margin-left: 20px
}

kbd,
tt {
    font-family: courier;
    font-size: 12px
}

ins {
    text-decoration: underline
}

del,
strike,
s {
    text-decoration: line-through
}

dt {
    font-weight: bold
}

address,
cite,
var {
    font-style: italic
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

.sticky {}

.bypostauthor {}

.wp-caption {}

.wp-caption-text {}

.gallery-caption {}

.alignright {}

.alignleft {}

.aligncenter {}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal
}

.screen-reader-text:focus {
    background-color: #f7f7f7;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto !important;
    clip-path: none;
    color: #007acc;
    display: block;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    right: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

.skip-link {
    left: -9999rem;
    top: 2.5rem;
    z-index: 999999999;
    text-decoration: underline
}

.skip-link:focus {
    display: block;
    left: 6px;
    top: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: normal;
    padding: 15px 23px 14px;
    z-index: 100000;
    right: auto
}

.visually-hidden:not(:focus):not(:active),
.form-allowed-tags:not(:focus):not(:active) {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap
}

/* Wrapper - flexbox rather than CSS Grid for the sidebar/content split.
   Was grid-template-columns, animated on collapse - grid track-list
   transitions turned out unreliable (confirmed via testing: the layout
   itself worked, but the transition left getComputedStyle reporting
   stale values indefinitely). flex-basis on #sidebar below is a far
   more standard, reliably-animated way to do the same collapsible-
   sidebar pattern. */
#wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar styles */
#sidebar {
    position: relative; /* anchors the docked collapse toggle - see .sidebar-collapse-toggle */
    flex: 0 0 250px;
    width: 250px;
    transition: flex-basis 200ms ease, width 200ms ease;
    background-color: #1f1f1f;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-bottom:0px;
    /* Visible, not auto - the collapse toggle deliberately hangs 13px
       off the right border (see .sidebar-collapse-toggle), and setting
       only overflow-y here would silently promote overflow-x to auto
       too (CSS spec: an unset axis paired with a non-visible axis
       resolves to auto), turning that intentional overflow into a real
       horizontal scrollbar that also ate into vertical space. #menu
       below is the actual vertical scroll container instead. */
    overflow: visible;
}

#sidebar #branding {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 30px;
}

/* #menu (<nav>) has no layout of its own by default, so it shrink-wraps
   its content instead of filling #sidebar's full height - without this,
   .nav-buttons (and therefore .nav-button-logout's margin-top:auto) has
   no leftover space to push into, and Log Out just sits directly under
   the last nav item instead of pinned to the bottom. */
#menu {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-buttons {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.nav-button-a-wrapper {
        display: flex;
    flex-direction: column;
    gap: 0.5em;

}


/* Calm by default - same background as the sidebar itself, no
   permanent outline/glow. Only .active (Overview) picks up the same
   accent treatment .nav-button.active uses; hover is a subtle
   lighten, since it's a home link and nothing more. */
.nav-button-site-logo-title {
    display: flex;
    align-items: center;
    padding: 10px;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    outline: 1px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.nav-button-site-logo-title:hover {
    background: var(--bg-soft);
}

.nav-button-site-logo-title.active {
    background: var(--card);
    border: 1px solid var(--accent);
    outline: 1px solid var(--accent-light);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

.nav-button-site-logo-title-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Wordmark + business name stacked as one unit, left-aligned under
   the wordmark - not a separate floating label. */
.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow: hidden;
}

.nav-logo-wordmark {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-logo-business-name {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background-color: var(--bg-soft);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.2s;
    border: 1px solid var(--card);
    outline: 1px solid var(--card);
}

.nav-button:hover {
    border: 1px solid var(--accent);
    outline: 1px solid var(--accent-light);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

.nav-button .material-symbols-outlined {
    font-size: 24px;
}

/* Active page - same accent treatment as the old tab bar's active tab,
   applied permanently rather than only on hover. */
.nav-button.active {
    background: var(--card);
    border: 1px solid var(--accent);
    outline: 1px solid var(--accent-light);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
    font-weight: 600;
}

/* Log Out is a utility, not a destination - pinned to the bottom of the
   sidebar (#sidebar is a full-height flex column, so margin-top:auto
   pushes it down; the empty space above is the only divider needed).
   No card/button box at all, even on hover - just a quiet icon+text
   row that brightens and tints red on hover, easy to click (full-width
   hit area kept) but not visually competing with the real nav items. */
.nav-button-logout {
    margin-top: auto;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 150ms ease, color 150ms ease;
}

.nav-button-logout .nav-button-text-element {
    font-size: 13px;
}

.nav-button-logout .material-symbols-outlined {
    font-size: 20px;
}

.nav-button-logout:hover {
    opacity: 1;
    color: var(--accent-light);
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

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

/* Docked-panel toggle: a small circle straddling #sidebar's own right
   edge (right:-13px is relative to that box, so this stays correctly
   positioned on the border in both collapsed/expanded widths without
   separate rules per state). Sits in #content's 20px padding gutter,
   not over real content. Quiet until you look for it - low opacity at
   rest, full on hover. Rendered on every logged-in page (see header.php). */
.sidebar-collapse-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -13px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    opacity: 0.5;
    cursor: pointer;
    z-index: 10;
    transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}

.sidebar-collapse-toggle:hover {
    opacity: 1;
    background: var(--bg-soft);
    color: var(--text);
}

.sidebar-collapse-toggle .material-symbols-outlined {
    font-size: 16px;
}

/* Desktop-only - the collapse feature doesn't exist on mobile (the
   sidebar there is an off-canvas drawer, see the max-width:768px block
   below), so these rules are scoped out entirely rather than fought
   with per-property overrides at that breakpoint. localStorage's
   sidebar-collapsed flag is written on desktop but read on any device,
   so without this scoping a phone could otherwise inherit a desktop
   session's collapsed state. */
@media (min-width: 769px) {
    body.sidebar-collapsed #sidebar {
        flex-basis: 68px;
        width: 68px;
        padding-left: 10px;
        padding-right: 10px;
    }

    body.sidebar-collapsed .nav-logo-text,
    body.sidebar-collapsed .nav-button-text-element,
    body.sidebar-collapsed .sidebar-collapse-toggle span:not(.material-symbols-outlined) {
        display: none;
    }

    body.sidebar-collapsed .nav-button-site-logo-title-wrapper {
        justify-content: center;
    }

    /* Click targets stay comfortable (full rail width, real padding)
       even though only the icon is visible. */
    body.sidebar-collapsed .nav-button {
        justify-content: center;
        padding: 12px 0;
    }
}

#content {
    flex: 1 1 auto;
    min-width: 0; /* without this, a flex item won't shrink below its content's intrinsic width, which would silently defeat the sidebar collapse */
    padding: 20px;
    overflow-y: auto;
    /* overflow-x explicit, not left unset - an unset axis paired with a
       non-visible axis on the same box silently resolves to auto too, so
       this used to become a SECOND horizontal scroll container stacked on
       top of the table's own (#inventory-list-inner). scrollbar-gutter
       keeps this box's own width stable regardless of whether its
       vertical scrollbar is showing, so it can never trigger a knock-on
       resize of the table underneath it either. */
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

#content::-webkit-scrollbar {
    width: 8px;
}

#content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.outer-modal-wrapper{
    border-radius: var(--outer-radius);
    background: var(--gb-gradient);
    padding: 10px;

}

.inner-modal-wrapper{
    border-radius: var(--radius);
    background: var(--card);
    padding: 10px;
}

/* =========================
   MOBILE TOP BAR + OFF-CANVAS NAV DRAWER
   The sidebar's existing nav markup is reused as-is for the drawer
   (no duplicated nav items) - it just switches from an in-flow flex
   child to a fixed, off-canvas panel at this breakpoint, toggled via
   .mobile-nav-open on <body> (see frontend.js). Hidden entirely above
   768px, so desktop's own sidebar is untouched.
========================= */
#mobile-topbar,
#mobile-nav-backdrop {
    display: none;
}

@media (max-width: 768px) {
    #mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
        background-color: #1f1f1f;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }

    #mobile-topbar-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        min-width: 0;
    }

    #mobile-topbar-text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        overflow: hidden;
    }

    #mobile-topbar-wordmark {
        font-weight: 700;
        font-size: 15px;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mobile-topbar-business {
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mobile-nav-toggle {
        background: transparent;
        border: none;
        color: var(--text);
        padding: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #mobile-nav-toggle .material-symbols-outlined {
        font-size: 26px;
    }

    /* display:none by default (set above, outside any media query) so
       it can never exist as a layout element on desktop; only becomes
       a real overlay once both this breakpoint AND the open state
       apply. */
    body.mobile-nav-open #mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 90;
    }

    #wrapper {
        flex-direction: column;
        height: 100vh;
    }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 250px;
        flex-basis: 250px;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        z-index: 100;
    }

    body.mobile-nav-open #sidebar {
        transform: translateX(0);
    }

    /* Desktop-only collapse rules are scoped out at min-width:769px
       above, so the drawer here is always full-width/full-label
       regardless of whatever collapsed state a desktop session left
       in localStorage. The collapse toggle button itself is already
       Inventory-only and now additionally hidden below. */
    .sidebar-collapse-toggle {
        display: none;
    }

    #content {
        padding-top: 16px;
    }
}

@media (max-width: 480px) {
            #content {
            padding: 8px;
        }
}

/* Form controls aren't part of the universal reset at the top of this
   file (that list stops at form/label/legend, not input/select/
   textarea), so without an explicit font-size they fall back to the
   browser's own ~13.3px UA-stylesheet default for form controls - not
   inherited from body's 16px the way plain text is. Verified live on
   Add Product: every input/select/textarea computed to 13.3333px.
   Below 16px, iOS Safari auto-zooms the page on focus. Global and
   mobile-only rather than patched per-template, since this affects
   every form site-wide, not just Inventory's already-fixed filters. */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

:root {
    --accent: #C54435;
    --accent-strong: #C91B08;
    --accent-light: #F65543;
    --bg: #140b0b;
    --bg-soft: #231111;
    --card: #3b2d2d;
    --text: #f3e7e7;
    --muted: #b29a9a;
    --border: rgba(255, 255, 255, 0.08);
    --radius: 14px;
    --outer-radius: 24px;
    --gb-gradient: linear-gradient(135deg, #6f6f6f, #241817);
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.woff2') format('woff2'),
         url('fonts/Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body, p, span, div, a, input, button, textarea, h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================
   SHARED TOOLTIP ([data-tooltip])
   One popup for the whole app (Xero status rings, collapsed sidebar
   nav icons, anything else that adds data-tooltip="..."). Previously
   a pure-CSS ::after/::before pair positioned relative to the target
   itself - which meant a target inside a scrolling container (the
   inventory table) got its tooltip clipped by that container's own
   overflow. Now a single element appended to <body> and positioned
   via JS (frontend.js) with position:fixed, which escapes any
   ancestor's clipping entirely. See frontend.js for the show/hide/
   positioning logic (including the sidebar's right-side placement and
   viewport edge-flipping); this is just its at-rest appearance.
========================= */
.js-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 100ms ease;
}

.js-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}