/* Kalisha theme for ERPNext / Frappe Desk v15  -  calm, elegant, easy on the eyes.
   Palette from the Kalisha visual guideline: #7B599B  #AB96BE  #DAD1E2  #C9A1E1  #F6F0EC
   Purple is used for accents and actions only; surfaces stay soft so long sessions stay comfortable. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

:root {
  --k-purple: #7B599B;
  --k-purple-dark: #5F4379;
  --k-purple-deep: #3F2D54;
  --k-lilac: #C9A1E1;
  --k-mauve: #AB96BE;
  --k-lavender: #DAD1E2;
  --k-cream: #F6F0EC;
  --k-tint: #F1EBF6;          /* soft purple wash: hover / active */
  --k-tint-2: #E8DFF1;
  --k-bg: #F8F6FA;            /* page background */
  --k-card: #FFFFFF;
  --k-border: #E9E3EE;
  --k-border-strong: #D9D0E1;
  --k-text: #2F2839;          /* warm aubergine, never pure black */
  --k-text-2: #6B6076;
  --k-text-3: #9A90A5;
  --k-input: #FCFBFD;
  --k-shadow: 0 1px 2px rgba(63, 45, 84, .05), 0 6px 20px rgba(63, 45, 84, .06);
  --k-shadow-hover: 0 2px 4px rgba(63, 45, 84, .06), 0 12px 28px rgba(63, 45, 84, .10);
  --k-ok: #2E7D5B; --k-ok-bg: #E4F3EB;
  --k-warn: #9A6A14; --k-warn-bg: #FBF0DA;
  --k-bad: #A8323E; --k-bad-bg: #FBE7E9;
  --k-info: #4B5FA8; --k-info-bg: #E8ECF8;

  /* map onto Frappe's own variables so every built-in component follows */
  --primary: var(--k-purple);
  --primary-color: var(--k-purple);
  --bg-color: var(--k-bg);
  --fg-color: var(--k-card);
  --card-bg: var(--k-card);
  --navbar-bg: var(--k-card);
  --control-bg: var(--k-input);
  --control-bg-on-gray: var(--k-input);
  --text-color: var(--k-text);
  --heading-color: var(--k-text);
  --text-muted: var(--k-text-2);
  --text-light: var(--k-text-3);
  --border-color: var(--k-border);
  --dark-border-color: var(--k-border-strong);
  --border-radius: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --shadow-base: var(--k-shadow);
  --text-2xs: 9px; --text-xs: 10px; --text-sm: 11px; --text-base: 12px; --text-md: 12.5px;
  --text-lg: 13.5px; --text-xl: 15px; --text-2xl: 18px; --text-3xl: 21px;
  --font-stack: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ------------------------------------------------------------------ dark (purple night) */
:root[data-theme="dark"] {
  --k-purple: #B592D6;
  --k-purple-dark: #CDB1E6;
  --k-purple-deep: #E6D8F2;
  --k-tint: #2D2538;
  --k-tint-2: #382D46;
  --k-bg: #17131C;
  --k-card: #211C28;
  --k-border: #322B3C;
  --k-border-strong: #43394F;
  --k-text: #ECE6F2;
  --k-text-2: #B4AAC0;
  --k-text-3: #877D94;
  --k-input: #1B1722;
  --k-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --k-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .35);
  --k-ok: #6FCB9F; --k-ok-bg: #1E3329;
  --k-warn: #E3B863; --k-warn-bg: #3A2F18;
  --k-bad: #EE8C96; --k-bad-bg: #3B1F24;
  --k-info: #9DB0F0; --k-info-bg: #232A44;
}

/* ------------------------------------------------------------------ base */
html, body { font-size: 12px !important; }
body, .btn, input, select, textarea, .form-control {
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px !important; color: var(--k-text);
  -webkit-font-smoothing: antialiased; letter-spacing: .005em;
}
body { background: var(--k-bg) !important; line-height: 1.55; }
::selection { background: var(--k-lilac); color: #2F2839; }
a { color: var(--k-purple); }
* { scrollbar-width: thin; scrollbar-color: var(--k-border-strong) transparent; }
h1, h2, h3, .page-title .title-text, .title-text, .modal-title, .h4 {
  font-family: 'Montserrat', 'Plus Jakarta Sans', sans-serif !important;
}

/* ------------------------------------------------------------------ top bar */
.navbar {
  background: var(--k-card) !important; border-bottom: 1px solid var(--k-border) !important;
  box-shadow: 0 1px 0 rgba(123, 89, 155, .06); height: 52px;
}
.navbar .navbar-brand { display: flex; align-items: center; }
.navbar .app-logo, .navbar .navbar-brand img { height: 30px !important; width: auto !important; max-width: 150px !important; }
.navbar .nav-link, .navbar .nav-item, .navbar .dropdown-toggle { color: var(--k-text-2) !important; }
.navbar svg, .navbar .icon { stroke: var(--k-text-2) !important; }
.navbar .search-bar input {
  background: var(--k-bg) !important; color: var(--k-text) !important; border: 1px solid var(--k-border) !important;
  border-radius: 10px !important; height: 32px; box-shadow: none !important;
}
.navbar .search-bar input::placeholder { color: var(--k-text-3) !important; }
.navbar .search-bar input:focus { border-color: var(--k-mauve) !important; background: var(--k-card) !important; }
.navbar-breadcrumbs, .navbar-breadcrumbs li, .navbar-breadcrumbs a, #navbar-breadcrumbs li a { color: var(--k-text-3) !important; }
.navbar-breadcrumbs a:hover { color: var(--k-purple) !important; }
.navbar-breadcrumbs li:last-child a, .navbar-breadcrumbs li:last-child { color: var(--k-text) !important; font-weight: 600; }
.navbar .avatar-frame { border: 2px solid var(--k-lavender); }

/* ------------------------------------------------------------------ page header */
.page-head { background: transparent !important; border: 0 !important; }
.page-head .title-text, .page-title .title-text { color: var(--k-text) !important; font-weight: 600 !important; font-size: 17px !important; letter-spacing: -.005em; }
.page-head .indicator-pill { vertical-align: middle; }

/* ------------------------------------------------------------------ sidebar */
.layout-side-section { padding-right: 8px; }
.layout-side-section .standard-sidebar-label, .layout-side-section .sidebar-section-label {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .09em; text-transform: uppercase;
  color: var(--k-text-3) !important; padding: 12px 12px 4px !important;
}
.layout-side-section .sidebar-item-container { margin: 1px 0; }
.layout-side-section .sidebar-item-container .item-anchor {
  display: flex !important; align-items: center; justify-content: flex-start !important; min-height: 34px;
  margin: 0 4px !important; padding: 6px 12px !important; border-radius: 10px; font-weight: 500;
  color: var(--k-text-2); text-align: left !important; transition: background .12s, color .12s;
}
.layout-side-section .sidebar-item-label { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35; flex: 1; min-width: 0; }
.layout-side-section .sidebar-item-icon { margin-right: 10px !important; flex-shrink: 0; opacity: .8; }
.layout-side-section .sidebar-item-container .item-anchor:hover { background: var(--k-tint) !important; color: var(--k-purple-dark); }
.layout-side-section .sidebar-item-container.selected .item-anchor,
.layout-side-section .sidebar-item-container .selected {
  background: var(--k-tint) !important; color: var(--k-purple-dark) !important; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--k-purple);
}
.layout-side-section .sidebar-item-container.selected *, .layout-side-section .sidebar-item-container .selected * { color: var(--k-purple-dark) !important; }

/* ------------------------------------------------------------------ cards / widgets */
.widget, .frappe-card, .form-layout .form-page, .layout-main-section, .report-wrapper, .list-row-container {
  border-radius: 14px !important;
}
.widget {
  background: var(--k-card) !important; border: 1px solid var(--k-border) !important; box-shadow: var(--k-shadow) !important;
}
.widget.spacer, .ce-paragraph.widget, .ce-paragraph { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.ce-paragraph.widget { color: var(--k-text-2) !important; padding-left: 0 !important; }

/* number cards: quiet, big numbers */
.number-widget-box { transition: transform .15s, box-shadow .15s, border-color .15s; margin-bottom: 6px !important; min-height: 0 !important; }
.number-widget-box:hover { transform: translateY(-2px); box-shadow: var(--k-shadow-hover) !important; border-color: var(--k-lavender) !important; }
.number-widget-box .widget-title, .number-widget-box .widget-label, .number-widget-box .widget-title .ellipsis {
  color: var(--k-text-3) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .06em;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3;
}
.number-widget-box .number { color: var(--k-purple-deep) !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; font-size: 24px !important; }
:root[data-theme="dark"] .number-widget-box .number { color: var(--k-purple-dark) !important; }

/* shortcut cards: monogram chip + title + count */
.shortcut-widget-box {
  position: relative; min-height: 66px !important; display: flex !important; align-items: center; cursor: pointer;
  padding: 10px 16px 10px 64px !important; margin-bottom: 12px !important;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.shortcut-widget-box:hover { transform: translateY(-2px); box-shadow: var(--k-shadow-hover) !important; border-color: var(--k-lavender) !important; background: var(--k-card) !important; }
.shortcut-widget-box .widget-head { width: 100%; display: flex; justify-content: space-between; align-items: center !important; align-self: stretch; min-height: 44px; margin: 0; }
.shortcut-widget-box .widget-label { display: flex; align-items: center; flex: 1; min-width: 0; }
.shortcut-widget-box .widget-title { display: flex; align-items: center; font-size: 12.5px !important; font-weight: 600 !important; color: var(--k-text) !important; }
.shortcut-widget-box .widget-title .ellipsis { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
.shortcut-widget-box .widget-subtitle { display: none; }
.shortcut-widget-box .widget-control { display: flex; align-items: center; gap: 6px; margin-left: 8px; flex-shrink: 0; }
.shortcut-widget-box .es-icon { stroke: var(--k-text-3) !important; }
.shortcut-widget-box .indicator-pill { font-size: 11px !important; padding: 2px 9px !important; min-width: 28px; justify-content: center; background: var(--k-tint) !important; color: var(--k-purple-dark) !important; }
.shortcut-widget-box::before {
  content: '\2022'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 11px; background: var(--k-tint); color: var(--k-purple);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.shortcut-widget-box[aria-label="Supplier"]::before { content: 'S'; }
.shortcut-widget-box[aria-label="Item Kain"]::before, .shortcut-widget-box[aria-label="Item"]::before { content: 'I'; }
.shortcut-widget-box[aria-label="Purchase Order"]::before { content: 'PO'; }
.shortcut-widget-box[aria-label="Terima Barang"]::before { content: 'TB'; }
.shortcut-widget-box[aria-label="QC Kain"]::before, .shortcut-widget-box[aria-label="Inspeksi QC"]::before { content: 'QC'; }
.shortcut-widget-box[aria-label="Tagihan"]::before { content: 'TG'; }
.shortcut-widget-box[aria-label="Pembayaran"]::before { content: 'Rp'; }
.shortcut-widget-box[aria-label="Katalog Produk"]::before { content: 'K'; }
.shortcut-widget-box[aria-label="BA Retur"]::before { content: 'BA'; }

/* ------------------------------------------------------------------ buttons */
.btn { border-radius: 9px !important; font-weight: 600 !important; padding: 5px 13px !important; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn-primary, .btn-primary-dark {
  background: var(--k-purple) !important; border: 1px solid var(--k-purple) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(95, 67, 121, .25);
}
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary-dark { color: #1d1526 !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--k-purple-dark) !important; border-color: var(--k-purple-dark) !important; }
.btn-default, .btn-secondary { background: var(--k-card) !important; border: 1px solid var(--k-border-strong) !important; color: var(--k-text) !important; box-shadow: none !important; }
.btn-default:hover, .btn-secondary:hover { background: var(--k-tint) !important; border-color: var(--k-mauve) !important; color: var(--k-purple-dark) !important; }

/* ------------------------------------------------------------------ forms */
.form-control, .input-with-feedback, .awesomplete input, select.form-control {
  background: var(--k-input) !important; border: 1px solid var(--k-border) !important; border-radius: 9px !important; color: var(--k-text) !important; box-shadow: none !important;
}
.form-control:focus, .input-with-feedback:focus {
  border-color: var(--k-mauve) !important; background: var(--k-card) !important; box-shadow: 0 0 0 3px rgba(201, 161, 225, .30) !important;
}
.form-control[disabled], .form-control[readonly] { background: var(--k-bg) !important; color: var(--k-text-2) !important; }
.control-label, .form-group .control-label { color: var(--k-text-2) !important; font-weight: 500; }
.form-section, .form-dashboard-section, .section-head { border-color: var(--k-border) !important; }
.section-head { color: var(--k-text) !important; font-weight: 600; }
.form-tabs .nav-link { color: var(--k-text-2) !important; font-weight: 500; border: 0 !important; }
.form-tabs .nav-link.active { color: var(--k-purple-dark) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--k-purple); background: transparent !important; }
.form-grid, .grid-row, .grid-heading-row { border-color: var(--k-border) !important; }
.grid-heading-row, .grid-heading-row .static-area { background: var(--k-tint) !important; color: var(--k-text-2) !important; }

/* ------------------------------------------------------------------ lists / reports */
.list-row-head, .result thead, .list-row-head .list-row-col { background: var(--k-tint) !important; color: var(--k-text-2) !important; font-weight: 600; }
.list-row { border-color: var(--k-border) !important; }
.list-row:hover { background: var(--k-tint) !important; }
.frappe-list .list-row-container { border-color: var(--k-border) !important; }
.report-wrapper .dt-header, .report-wrapper .dt-cell--header { background: var(--k-tint) !important; color: var(--k-text-2) !important; }
.filter-selector .filter-button, .sort-selector .btn { background: var(--k-card) !important; }

/* ------------------------------------------------------------------ status pills (soft, readable) */
.indicator-pill { border-radius: 999px !important; font-weight: 600 !important; font-size: 10.5px !important; padding: 2px 10px !important; }
.indicator-pill.green, .indicator-pill.success { background: var(--k-ok-bg) !important; color: var(--k-ok) !important; }
.indicator-pill.red, .indicator-pill.danger { background: var(--k-bad-bg) !important; color: var(--k-bad) !important; }
.indicator-pill.orange, .indicator-pill.yellow, .indicator-pill.warning { background: var(--k-warn-bg) !important; color: var(--k-warn) !important; }
.indicator-pill.blue, .indicator-pill.light-blue, .indicator-pill.cyan { background: var(--k-info-bg) !important; color: var(--k-info) !important; }
.indicator-pill.purple, .indicator-pill.pink { background: var(--k-tint-2) !important; color: var(--k-purple-dark) !important; }
.indicator-pill.gray, .indicator-pill.grey { background: var(--k-bg) !important; color: var(--k-text-2) !important; }

/* ------------------------------------------------------------------ menus, modals, popovers */
.dropdown-menu, .modal-content, .popover, .awesomplete > ul { border-radius: 12px !important; border: 1px solid var(--k-border) !important; box-shadow: var(--k-shadow-hover) !important; background: var(--k-card) !important; }
.dropdown-item:hover, .dropdown-menu a:hover, .awesomplete li:hover, .awesomplete li[aria-selected="true"] { background: var(--k-tint) !important; color: var(--k-purple-dark) !important; }
.modal-header, .modal-footer { border-color: var(--k-border) !important; }
.alert, .msgprint { border-radius: 10px; }

/* ------------------------------------------------------------------ login + website pages */
.for-login, .for-forgot, .for-signup, .for-email-login {
  background: radial-gradient(1200px 500px at 50% -10%, #EADFF3 0%, var(--k-bg) 60%) !important;
}
.page-card, .login-content.page-card {
  border: 1px solid var(--k-border) !important; border-radius: 18px !important; box-shadow: var(--k-shadow-hover) !important; background: var(--k-card) !important;
}
.page-card .btn-primary, .login-button { border-radius: 10px !important; padding: 8px 14px !important; }
.page-card-head .app-logo, .login-content .app-logo { height: 54px !important; width: auto !important; max-width: 220px !important; }
.web-footer { display: none; }

/* ---- dark mode: lift the purple logo so it stays readable */
:root[data-theme="dark"] .navbar .app-logo, :root[data-theme="dark"] .navbar .navbar-brand img,
:root[data-theme="dark"] .page-card-head .app-logo, :root[data-theme="dark"] .login-content .app-logo {
  filter: brightness(1.7) saturate(.85);
}

/* ---- audit fixes */
[data-fieldname="naming_series"] { display: none !important; }                       /* default series is always used */
.sp-wf .actions-btn-group { display: none !important; }                                /* our visible workflow buttons replace the hidden menu */
.btn-danger-soft { background: var(--k-bad-bg) !important; color: var(--k-bad) !important; border: 1px solid transparent !important; }
.btn-danger-soft:hover { border-color: var(--k-bad) !important; }
.page-head .title-text { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.indicator-pill.ellipsis { max-width: none; }