@charset "UTF-8";
/* ============================================================================
 * JAVIN DESIGN SYSTEM — desk theme
 * ============================================================================
 *
 * Frappe v15 is entirely CSS-custom-property driven: every surface, border,
 * radius, shadow and type size in the desk resolves through a token defined in
 * apps/frappe/frappe/public/scss/espresso/*. That is the leverage this file
 * uses. Redefining the tokens restyles every module at once - Stock, Buying,
 * Selling, Manufacturing, list views, forms, reports, modals - without
 * chasing components one by one, and without editing a single frappe or
 * erpnext file.
 *
 * Loaded after frappe's own stylesheet via `app_include_css` in hooks.py, so
 * equal-specificity rules here win. Deleting this file restores stock ERPNext
 * exactly.
 *
 * Layer 1  tokens     - palette, type, radius, shadow, elevation
 * Layer 2  chrome     - navbar, sidebar, page head
 * Layer 3  components - buttons, inputs, lists, tables, cards, modals
 * Layer 4  dark theme - the same tokens re-pitched for [data-theme="dark"]
 * ========================================================================= */
/* Generated from public/fonts/javin_fonts.css - see that file for provenance.
 * Kept as an SCSS partial so the faces are inlined into the desk bundle and
 * arrive in the same request as the theme.
 *
 * IBM Plex Sans is a variable font: one file covers weights 400-700.
 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/javin_inventory/fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/javin_inventory/fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/javin_inventory/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/javin_inventory/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/javin_inventory/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/javin_inventory/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------------------------------------------------------------------------
 * LAYER 1 — TOKENS
 * ------------------------------------------------------------------------ */
:root,
[data-theme=light] {
  /* --- Neutrals -----------------------------------------------------------
   * Stock ERPNext uses pure neutral grays (#f3f3f3, #171717). Pure gray at
   * low saturation reads as unfinished next to a coloured brand. These carry
   * a slight navy bias so every surface belongs to the same family as the
   * JAVIN mark, while staying neutral enough for dense data.
   */
  --gray-50: #f6f8fb;
  --gray-100: #eff2f7;
  --gray-200: #e4e8f0;
  --gray-300: #d3d9e5;
  --gray-400: #aeb7c9;
  --gray-500: #8792a8;
  --gray-600: #66718a;
  --gray-700: #4a5468;
  --gray-800: #2e3648;
  --gray-900: #161c2b;
  /* --- Brand --------------------------------------------------------------
   * #1A2B58 and #F37521 come straight off the JAVIN logo. The navy ramp is
   * built around the logo value so hover and pressed states stay in family.
   */
  --javin-navy-50: #eef1f8;
  --javin-navy-100: #dbe1ef;
  --javin-navy-200: #b8c3dd;
  --javin-navy-300: #8496c2;
  --javin-navy-400: #4a6396;
  --javin-navy-500: #1a2b58;
  --javin-navy-600: #16244a;
  --javin-navy-700: #121d3c;
  --javin-navy-800: #0e172f;
  --javin-navy-900: #0a1122;
  --javin-orange-50: #fef3ec;
  --javin-orange-100: #fde3d0;
  --javin-orange-200: #fac49f;
  --javin-orange-300: #f7a26c;
  --javin-orange-500: #f37521;
  --javin-orange-600: #d55f13;
  --javin-orange-700: #a94a0e;
  /* Blues drive links and info states. Pulled toward the navy so a link and
   * a primary button read as the same system rather than two brands. */
  --blue-50: #f2f6fc;
  --blue-100: #e6edf9;
  --blue-200: #d2ddf2;
  --blue-300: #b0c2e6;
  --blue-400: #6d8bc7;
  --blue-500: #2f57a6;
  --blue-600: #274a91;
  --blue-700: #1f3d7c;
  --blue-800: #1a3167;
  --blue-900: #142651;
  /* --- Primary ------------------------------------------------------------
   * Stock frappe sets --primary to near-black. Navy carries the brand
   * through every primary button, active state, progress bar and checkbox
   * in the product for the cost of one line.
   */
  --primary: var(--javin-navy-500);
  --primary-color: var(--javin-navy-500);
  --brand-color: var(--javin-navy-500);
  --btn-primary: var(--javin-navy-500);
  --border-primary: var(--javin-navy-500);
  --progress-bar-bg: var(--javin-navy-500);
  --checkbox-color: var(--javin-navy-500);
  --date-active-bg: var(--javin-navy-500);
  --timeline-badge-color: var(--javin-navy-500);
  /* --- Typography ---------------------------------------------------------
   * IBM Plex Sans: an enterprise face by origin, drawn for interfaces and
   * dense tables, and clearly distinct from the Inter that ships with every
   * Frappe install. Plex Mono handles codes, IDs and quantities.
   */
  --font-stack: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  	"Helvetica Neue", Arial, sans-serif;
  --font-stack-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Plex sits slightly wider than Inter at the same size, so the ladder is
   * pulled in a notch to keep list and grid density unchanged. */
  --text-tiny: 10.5px;
  --text-2xs: 11.5px;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-md: 12.5px;
  --text-base: 13.5px;
  --text-lg: 15px;
  --text-xl: 17px;
  --text-2xl: 19px;
  --text-3xl: 23px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --heading-color: var(--gray-900);
  --text-neutral: var(--gray-900);
  --text-color: var(--gray-800);
  --text-muted: var(--gray-600);
  --text-light: var(--gray-500);
  /* --- Radius -------------------------------------------------------------
   * Stock frappe rounds at 8-10px, which reads consumer-app. Enterprise
   * tooling sits tighter; every corner in the product moves with these.
   */
  --border-radius-tiny: 3px;
  --border-radius-sm: 5px;
  --border-radius: 6px;
  --border-radius-md: 7px;
  --border-radius-lg: 9px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  /* --- Elevation ----------------------------------------------------------
   * Navy-tinted rather than pure black: a black shadow over a blue-grey
   * surface muddies it. Flatter overall, with elevation reserved for things
   * that genuinely float.
   */
  --shadow-xs: 0 1px 1px rgba(22, 28, 43, 0.04), 0 0 0 1px rgba(22, 28, 43, 0.06);
  --shadow-sm: 0 1px 2px rgba(22, 28, 43, 0.06);
  --shadow-base: 0 1px 2px rgba(22, 28, 43, 0.08), 0 0 0 1px rgba(22, 28, 43, 0.04);
  --shadow-md: 0 2px 4px rgba(22, 28, 43, 0.06), 0 4px 12px rgba(22, 28, 43, 0.08);
  --shadow-lg: 0 4px 8px rgba(22, 28, 43, 0.06), 0 12px 28px rgba(22, 28, 43, 0.1);
  --shadow-xl: 0 8px 16px rgba(22, 28, 43, 0.07), 0 20px 44px rgba(22, 28, 43, 0.12);
  --shadow-2xl: 0 12px 24px rgba(22, 28, 43, 0.08), 0 32px 64px rgba(22, 28, 43, 0.14);
  --focus-default: 0 0 0 3px rgba(26, 43, 88, 0.18);
  --focus-blue: 0 0 0 3px rgba(26, 43, 88, 0.18);
  --checkbox-focus-shadow: var(--focus-default);
  /* --- Surfaces ----------------------------------------------------------- */
  --bg-color: var(--gray-50);
  --fg-color: #ffffff;
  --card-bg: #ffffff;
  --modal-bg: #ffffff;
  --popover-bg: #ffffff;
  --navbar-bg: var(--javin-navy-500);
  --subtle-accent: var(--gray-50);
  --subtle-fg: var(--gray-100);
  --control-bg: var(--gray-100);
  --control-bg-on-gray: var(--gray-200);
  --fg-hover-color: var(--gray-100);
  /* frappe drives sidebar hover, focus-within AND the selected state from this
   * one token (desk/global.scss). Setting it to the brand navy would paint a
   * navy panel under dark text on plain hover. It stays a light tint for the
   * transient states; the selected item is coloured explicitly further down. */
  --sidebar-select-color: var(--gray-100);
  --border-color: var(--gray-200);
  --dark-border-color: var(--gray-300);
  --table-border-color: var(--gray-200);
  --highlight-color: var(--gray-50);
  --awesomebar-focus-bg: #ffffff;
  --btn-default-bg: #ffffff;
  --btn-default-hover-bg: var(--gray-100);
  --btn-group-border-color: var(--gray-300);
  --scrollbar-thumb-color: var(--gray-300);
  --scrollbar-track-color: transparent;
  --navbar-height: 52px;
  --page-head-height: 62px;
  --btn-height: 30px;
  --input-height: 30px;
}

/* ---------------------------------------------------------------------------
 * BASE
 * ------------------------------------------------------------------------ */
body {
  font-family: var(--font-stack);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Frappe tracks body text at +0.02em, tuned for Inter. Plex is already
   * generously spaced; inheriting that makes running text look loose. */
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.page-title, .widget-title, .section-head {
  font-family: var(--font-stack);
  letter-spacing: -0.01em;
}

/* Quantities, rates and codes line up column to column. This is the single
 * most useful typographic change for an inventory system. */
.list-row-col .list-value,
.dt-cell__content,
.datatable .dt-cell,
.control-value,
input.form-control,
.frappe-control[data-fieldtype=Currency] input,
.frappe-control[data-fieldtype=Float] input,
.frappe-control[data-fieldtype=Int] input,
.report-wrapper td,
td.dt-cell {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
}

code, pre, .code-field, .like-disabled-input.for-description code {
  font-family: var(--font-stack-mono);
}

/* ---------------------------------------------------------------------------
 * LAYER 2 — CHROME: navbar
 * ------------------------------------------------------------------------ */
.navbar {
  height: var(--navbar-height);
  background: var(--javin-navy-500);
  border-bottom: 1px solid var(--javin-navy-700);
  box-shadow: 0 1px 3px rgba(10, 17, 34, 0.18);
}

.navbar .navbar-nav .nav-link,
.navbar .nav-item,
.navbar .navbar-brand,
.navbar a {
  color: rgba(255, 255, 255, 0.88);
}

.navbar .nav-link:hover,
.navbar a:hover {
  color: #ffffff;
}

/* Frappe icons are <use> references into a sprite whose paths are stroked with
 * `var(--icon-stroke)`. Setting `stroke:` on the <svg> therefore does nothing -
 * the colour has to be handed down as the custom property, which is how frappe
 * itself flips icons (see common/buttons.scss, desk/report.scss). Same rule
 * applies everywhere else in this file that recolours an icon. */
.navbar,
.navbar .navbar-nav,
.navbar .nav-item {
  --icon-stroke: rgba(255, 255, 255, 0.85);
}

.navbar .navbar-nav .nav-item:hover {
  --icon-stroke: #ffffff;
}

.navbar .vertical-bar {
  border-left-color: rgba(255, 255, 255, 0.18);
}

/* Search: a translucent well on the navy, lifting to a solid white field on
 * focus so the results dropdown reads against it. */
.navbar .search-bar {
  max-width: 420px;
}

.navbar .search-bar .awesomplete input {
  height: 32px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--border-radius);
  color: #ffffff;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.navbar .search-bar .awesomplete input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar .search-bar .awesomplete input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar .search-bar .awesomplete input:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--gray-900);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
}

.navbar .search-bar {
  --icon-stroke: rgba(255, 255, 255, 0.7);
}

/* Avatar gets a ring so it separates from the navy without a border box. */
.navbar .avatar-frame,
.navbar .avatar .avatar-frame {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Panels that hang OFF the navy navbar but render on a white surface.
 *
 * `.navbar a { color: white }` above is right for the bar itself and wrong for
 * everything that drops out of it: the Ctrl+G results, the notification list and
 * the avatar menu are all descendants of .navbar, so they inherited white text on
 * a white panel and went invisible - only the yellow <mark> highlights stayed
 * readable, because they carry their own colours. Text colour and icon colour
 * both have to be handed back here. */
.navbar .dropdown-menu,
.navbar .dropdown-menu .dropdown-item,
.navbar .awesomplete > ul,
.navbar .awesomplete > ul li,
.navbar .awesomplete > ul li a {
  --icon-stroke: var(--gray-700);
  color: var(--text-color);
}

.navbar .awesomplete > ul {
  background-color: var(--fg-color);
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: var(--shadow-xl);
  padding: 4px;
}

.navbar .awesomplete > ul li {
  border-radius: var(--border-radius-sm);
  padding: 7px 10px;
}

/* Awesomplete marks the selected row with aria-selected, not :hover alone. */
.navbar .awesomplete > ul li:hover,
.navbar .awesomplete > ul li[aria-selected=true] {
  background-color: var(--gray-100);
  color: var(--gray-900);
}

/* The matched characters. Frappe emits <mark>; give it a readable pairing rather
 * than the browser default black-on-yellow. */
.navbar .awesomplete > ul li mark,
.navbar .awesomplete mark {
  background-color: var(--javin-orange-100);
  color: var(--javin-orange-700);
  font-weight: var(--weight-semibold);
  padding: 0 1px;
  border-radius: 2px;
}

.navbar .awesomplete > ul li[aria-selected=true] mark {
  background-color: var(--javin-orange-200);
}

.navbar .dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 6px;
  margin-top: 8px;
}

.navbar .dropdown-menu .dropdown-item {
  border-radius: var(--border-radius-sm);
  color: var(--text-color);
}

.navbar .dropdown-menu .dropdown-item:hover {
  background-color: var(--gray-100);
  color: var(--gray-900);
}

/* ---------------------------------------------------------------------------
 * LAYER 2 — CHROME: workspace sidebar
 * ------------------------------------------------------------------------ */
.layout-side-section .desk-sidebar {
  padding-top: 12px;
}

.desk-sidebar .standard-sidebar-label {
  font-size: var(--text-tiny);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 10px 8px 6px;
}

.desk-sidebar .desk-sidebar-item {
  border-radius: var(--border-radius);
  margin-bottom: 2px;
  transition: background-color 100ms ease, color 100ms ease;
}

.desk-sidebar .desk-sidebar-item > .item-anchor {
  padding: 7px 10px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-color);
}

.desk-sidebar .desk-sidebar-item:not(.selected):hover {
  background-color: var(--gray-100);
}

/* The active workspace is the one piece of navigation state that must be
 * unmistakable, so it takes the full brand colour rather than a tint. */
.desk-sidebar .desk-sidebar-item.selected {
  background-color: var(--javin-navy-500);
}

.desk-sidebar .desk-sidebar-item.selected > .item-anchor,
.desk-sidebar .desk-sidebar-item.selected > .item-anchor .sidebar-item-label {
  color: #ffffff;
  font-weight: var(--weight-semibold);
}

/* Stock frappe never recolours this icon, because its selected state is a light
 * grey pill where the default dark icon still reads. A navy pill breaks that
 * pairing, so the icon has to be lifted with the label - otherwise the label
 * turns white and the icon stays dark. */
.desk-sidebar .desk-sidebar-item.selected,
.desk-sidebar .desk-sidebar-item.selected .item-anchor,
.desk-sidebar .desk-sidebar-item.selected .sidebar-item-icon {
  --icon-stroke: #ffffff;
  --icon-fill-bg: transparent;
}

.desk-sidebar .sidebar-item-icon {
  --icon-stroke: var(--gray-500);
}

/* Private workspaces show a coloured dot instead of an icon; it needs the same
 * lift against navy. */
.desk-sidebar .desk-sidebar-item.selected .sidebar-item-icon .indicator::before {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}

/* List and form sidebars: same rhythm as the workspace one. */
.list-sidebar .sidebar-label,
.form-sidebar .sidebar-label {
  font-size: var(--text-tiny);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-light);
}

.list-sidebar .sidebar-menu > li > a:hover,
.form-sidebar .sidebar-menu > li > a:hover {
  background-color: var(--gray-100);
  border-radius: var(--border-radius-sm);
}

/* ---------------------------------------------------------------------------
 * LAYER 2 — CHROME: page head
 * ------------------------------------------------------------------------ */
.page-head {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: saturate(160%) blur(6px);
}

.page-head .page-title .title-text {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  color: var(--heading-color);
}

.page-head .sidebar-toggle-btn,
.page-head .indicator-pill {
  vertical-align: middle;
}

/* Breadcrumbs recede — they are orientation, not content. */
#navbar-breadcrumbs a,
.breadcrumb-container a {
  color: var(--text-light);
  font-size: var(--text-sm);
}

#navbar-breadcrumbs a:hover,
.breadcrumb-container a:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: buttons
 * ------------------------------------------------------------------------ */
.btn {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--border-radius);
  letter-spacing: 0;
  transition: background-color 110ms ease, border-color 110ms ease, box-shadow 110ms ease;
}

.btn-primary,
.btn.btn-primary {
  background-color: var(--javin-navy-500);
  border: 1px solid var(--javin-navy-500);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--javin-navy-600);
  border-color: var(--javin-navy-600);
  color: #ffffff;
}

.btn-default,
.btn-secondary {
  background-color: #ffffff;
  border: 1px solid var(--gray-300);
  color: var(--text-color);
  box-shadow: var(--shadow-xs);
}

.btn-default:hover,
.btn-secondary:hover {
  background-color: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-900);
}

.btn:focus-visible,
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-default);
}

/* The primary action on a form is the one button a user hunts for. */
.page-actions .btn-primary {
  font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: inputs
 * ------------------------------------------------------------------------ */
.form-control,
.input-with-feedback,
select.form-control {
  background-color: #ffffff;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  font-size: var(--text-base);
  color: var(--text-color);
  transition: border-color 110ms ease, box-shadow 110ms ease;
}

.form-control:focus,
.input-with-feedback:focus {
  border-color: var(--javin-navy-400);
  box-shadow: var(--focus-default);
  background-color: #ffffff;
}

.form-control::-moz-placeholder {
  color: var(--gray-400);
}

.form-control::placeholder {
  color: var(--gray-400);
}

.control-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  letter-spacing: 0;
}

/* Frappe renders read-only values as bare text; a hairline keeps a submitted
 * form scannable as a set of fields rather than a wall of words. */
.frappe-control .control-value {
  font-size: var(--text-base);
  color: var(--text-color);
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: cards, sections, widgets
 * ------------------------------------------------------------------------ */
.frappe-card,
.widget,
.form-section,
.dashboard-widget-box {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.widget:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}

.widget .widget-head .widget-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--heading-color);
}

.form-section .section-head,
.section-head {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: list view
 * ------------------------------------------------------------------------ */
.list-row-head {
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--border-color);
}

.list-row-head .list-row-col span,
.list-row-head .list-subject {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-light);
}

.list-row-container {
  border-bottom: 1px solid var(--gray-100);
}

.list-row-container:hover,
.list-row:hover {
  background-color: var(--gray-50);
}

.list-row .list-subject .level-item .ellipsis {
  font-weight: var(--weight-medium);
  color: var(--gray-900);
}

.list-row-container .list-row {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Status pills: chips rather than coloured text, so state reads at a glance
 * down a column of two hundred rows. */
.indicator-pill,
.indicator-pill span {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--border-radius-full, 999px);
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: report / datatable
 * ------------------------------------------------------------------------ */
.datatable .dt-header,
.dt-header .dt-cell--header {
  background-color: var(--gray-50);
}

.dt-cell--header .dt-cell__content {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

.datatable .dt-cell {
  border-color: var(--gray-200);
  font-size: var(--text-base);
}

.datatable .dt-row:hover .dt-cell {
  background-color: var(--gray-50);
}

.dt-cell--focus {
  box-shadow: inset 0 0 0 2px var(--javin-navy-400);
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: grids (child tables on forms)
 * ------------------------------------------------------------------------ */
.grid-heading-row {
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--border-color);
}

.grid-heading-row .col {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

.grid-row:hover {
  background-color: var(--gray-50);
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: modals, dropdowns, toasts, tooltips
 * ------------------------------------------------------------------------ */
.modal .modal-content {
  border: none;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-2xl);
}

.modal .modal-header {
  border-bottom: 1px solid var(--border-color);
  padding: 16px 20px;
}

.modal .modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.modal .modal-footer {
  border-top: 1px solid var(--border-color);
}

.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 6px;
}

.dropdown-menu .dropdown-item {
  border-radius: var(--border-radius-sm);
  font-size: var(--text-base);
  padding: 6px 10px;
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--gray-100);
}

.tooltip .tooltip-inner {
  background-color: var(--gray-900);
  border-radius: var(--border-radius-sm);
  font-size: var(--text-xs);
  padding: 5px 9px;
}

/* ---------------------------------------------------------------------------
 * LAYER 3 — COMPONENTS: scrollbars
 * ------------------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--gray-300);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-400);
}

/* ---------------------------------------------------------------------------
 * BRAND MARKS
 *
 * Frappe styles the navbar mark as `.app-logo { width: 24px }`, which suits its
 * own near-square logo. The JAVIN wordmark is ~3.1:1, so a 24px width renders
 * it about 8px tall - present in the DOM but unreadable. Size by height and let
 * width follow the aspect ratio.
 * ------------------------------------------------------------------------ */
/* The desk navbar mark.
 *
 * frappe's `get_app_logo()` returns ONE value (Website Settings.app_logo) and
 * feeds it to both the desk navbar and the login card - a navy header and a
 * white card. No single file can be correct for both, so the setting keeps the
 * navy wordmark (right for login) and the navy navbar swaps in the white cut
 * here, where the background is known.
 *
 * Done as a background on the anchor rather than by changing the src, because
 * the src comes from the database and would follow the login page too. The
 * <img> stays in the DOM, hidden, so the link keeps its shape and alt text.
 *
 * THE FILE IS `javin-logo-light.svg`. It was written here as
 * `javin-logo-white.svg` - a name that has never existed - so the background
 * 404'd while the <img> below stayed `visibility: hidden`, and the navbar mark
 * was blank on every page while the link under it still worked. */
.navbar .navbar-home,
.navbar .navbar-brand.navbar-home {
  display: inline-flex;
  align-items: center;
  /* THE P.K. INTERNATIONAL MARK on a white tile (2026-09-16), the same as the
   * desk navbar in javin_brand.bundle.css: maroon artwork on a navy bar. */
  width: 30px;
  height: 30px;
  margin-block: auto;
  border-radius: 6px;
  background-color: #fff;
  background-image: url("/assets/javin_inventory/images/pk-international-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 24px;
}

.navbar .navbar-home .app-logo {
  visibility: hidden;
  width: auto;
  height: 22px;
  max-width: 140px;
}

/* Anywhere else the mark appears on a light ground it is the navy file and only
 * needs sizing - frappe's `.app-logo { width: 24px }` suits its own near-square
 * logo, and the JAVIN wordmark at ~3.1:1 would render about 8px tall. */
img.app-logo {
  width: auto;
  height: 22px;
  max-width: 140px;
  -o-object-fit: contain;
     object-fit: contain;
}

.for-login .app-logo,
.page-card .app-logo,
.navbar-brand img {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 200px;
}

/* ---------------------------------------------------------------------------
 * LAYER 4 — DARK THEME
 *
 * Frappe ships a theme switcher, so the palette has to hold in dark too. The
 * navy becomes the *ground* rather than the accent, and a lighter tint of it
 * carries the interactive states - inverting the light values directly would
 * put an unreadably dark blue on a dark surface.
 * ------------------------------------------------------------------------ */
[data-theme=dark] {
  --gray-50: #12172200;
  --gray-900: #f2f5fa;
  --bg-color: #0f1420;
  --fg-color: #161c2b;
  --card-bg: #161c2b;
  --modal-bg: #1a2133;
  --popover-bg: #1a2133;
  --navbar-bg: #0c1120;
  --control-bg: #1f2739;
  --subtle-fg: #1f2739;
  --subtle-accent: #151b28;
  --fg-hover-color: #222b3f;
  --border-color: #28324a;
  --dark-border-color: #333e59;
  --table-border-color: #28324a;
  --highlight-color: #1a2133;
  --text-color: #dde3ee;
  --text-muted: #9aa5bd;
  --text-light: #7b8699;
  --heading-color: #f2f5fa;
  --primary: #6f8fd0;
  --primary-color: #6f8fd0;
  --brand-color: #6f8fd0;
  --btn-primary: #2f4a86;
  --border-primary: #6f8fd0;
  --progress-bar-bg: #6f8fd0;
  --sidebar-select-color: #222b3f;
  --btn-default-bg: #1f2739;
  --btn-default-hover-bg: #28324a;
  --scrollbar-thumb-color: #333e59;
  --focus-default: 0 0 0 3px rgba(111, 143, 208, 0.28);
  --focus-blue: 0 0 0 3px rgba(111, 143, 208, 0.28);
}

[data-theme=dark] .navbar {
  background: #0c1120;
  border-bottom-color: #28324a;
}

[data-theme=dark] .btn-primary,
[data-theme=dark] .btn.btn-primary {
  background-color: #2f4a86;
  border-color: #2f4a86;
}

[data-theme=dark] .btn-primary:hover {
  background-color: #3a599c;
  border-color: #3a599c;
}

[data-theme=dark] .btn-default,
[data-theme=dark] .btn-secondary,
[data-theme=dark] .form-control,
[data-theme=dark] select.form-control {
  background-color: #1f2739;
  border-color: #333e59;
  color: var(--text-color);
}

[data-theme=dark] .desk-sidebar .desk-sidebar-item.selected {
  background-color: #2f4a86;
}

[data-theme=dark] .list-row-head,
[data-theme=dark] .grid-heading-row,
[data-theme=dark] .datatable .dt-header,
[data-theme=dark] .dt-header .dt-cell--header {
  background-color: #1a2133;
}

[data-theme=dark] .list-row-container:hover,
[data-theme=dark] .list-row:hover,
[data-theme=dark] .grid-row:hover,
[data-theme=dark] .datatable .dt-row:hover .dt-cell {
  background-color: #1f2739;
}

/* ---------------------------------------------------------------------------
 * MOTION
 * Respect the OS setting. Nothing here is load-bearing animation.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}