/* SUVASA branding — size the vertical wordmark so it is readable on
   login/splash, without touching Frappe/ERPNext core CSS. */

.page-card-head img.app-logo {
	max-height: 140px !important;
	width: auto;
	height: auto;
	align-self: center;
}

.suvasa-pin-toggle {
	margin-top: 12px;
}

/* Login, forgot-password and email-link pages: one centred card in the
   SUVASA maroon/gold from the logo. Layout only; fields and flow are core. */
body[data-path="login"],
body[data-path="update-password"] {
	--suvasa-maroon: #5e1016;
	--suvasa-maroon-dark: #470b10;
	--suvasa-gold: #a8875a;
	background: radial-gradient(circle at 50% 0%, #fbf7f1 0%, #f1e9de 100%) fixed;
	min-height: 100vh;
}

body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	max-width: 420px;
	margin: 6vh auto 40px;
	padding: 40px 36px 32px;
	background: #fff;
	border: 1px solid #eadfd0;
	border-top: 4px solid var(--suvasa-maroon);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(94, 16, 22, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

body[data-path="login"] .page-card-head,
body[data-path="update-password"] .page-card-head,
body[data-path="login"] .page-card-head-text,
body[data-path="update-password"] .page-card-head-text {
	align-items: center;
}

body[data-path="login"] .page-card-head :is(h4, p),
body[data-path="update-password"] .page-card-head :is(h4, p) {
	text-align: center !important;
}

body[data-path="login"] .page-card-head img.app-logo {
	max-height: 120px !important;
}

body[data-path="login"] .page-card-head h4 {
	color: var(--suvasa-maroon);
	letter-spacing: 0.01em;
}

body[data-path="login"] .page-card-subtitle {
	width: 100%;
}

body[data-path="login"] .page-card .form-control:focus {
	border-color: var(--suvasa-gold);
	box-shadow: 0 0 0 2px rgba(168, 135, 90, 0.25);
}

body[data-path="login"] .page-card .es-button[data-variant="solid"],
body[data-path="update-password"] .page-card .es-button[data-variant="solid"] {
	background-color: var(--suvasa-maroon);
	color: #fff;
	height: 40px;
	font-weight: 600;
}

body[data-path="login"] .page-card .es-button[data-variant="solid"]:hover,
body[data-path="update-password"] .page-card .es-button[data-variant="solid"]:hover {
	background-color: var(--suvasa-maroon-dark);
}

body[data-path="login"] .page-card .btn-login-option {
	height: 40px;
}

body[data-path="login"] .page-card a[href="#forgot"],
body[data-path="login"] #suvasa-pin-toggle {
	color: var(--suvasa-maroon);
}

body[data-path="login"] .suvasa-pin-toggle {
	margin-top: 4px;
	font-weight: 500;
}

/* Phones: same floating card, tighter spacing (core makes it full-screen). */
@media (max-width: 575.98px) {
	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card {
		margin: 24px auto;
		min-height: 0;
		border: 1px solid #eadfd0;
		border-top: 4px solid var(--suvasa-maroon);
		border-radius: 16px;
		padding: 32px 20px 24px;
	}

	body[data-path="login"] .page-card-head img.app-logo {
		max-height: 96px !important;
	}
}

.splash img {
	max-height: 160px;
	max-width: 160px;
	width: auto;
	height: auto;
}

#brand-logo {
	height: 40px;
	width: auto;
	max-height: 40px;
}

/* Desktop Settings — live /apps tile preview */
.suvasa-desk-icon-preview {
	margin-top: 12px;
	padding: 16px;
	border: 1px dashed var(--border-color);
	border-radius: 12px;
	background: var(--control-bg);
	max-width: 560px;
}

.suvasa-desk-icon-preview-caption {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-bottom: 12px;
}

.suvasa-desk-icon-preview-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.suvasa-desk-icon-preview-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 127px;
	padding: 13px 16px 12px;
}

.suvasa-desk-icon-preview-icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.suvasa-desk-icon-preview-icon img {
	width: 54px;
	height: 54px;
	user-select: none;
	-webkit-user-drag: none;
}

.suvasa-desk-icon-preview-title {
	font-weight: var(--weight-semibold);
	font-size: var(--text-md);
	line-height: 1.3;
	text-align: center;
}

.suvasa-desk-icon-preview-meta {
	margin-top: 4px;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* Store Transfer — Prompt Qty / Scan Mode hover hints (store_transfer.js's
   render_scan_hints). Scoped strictly to the .stf-hint-only class, which is
   only ever added to those two fields on this one doctype -- never a bare
   selector, so no other field on any other form is affected.
   A Check field's description renders as <p class="help-box ...">, verified
   directly against the live DOM -- not a .description div (that's the
   Data/Link field structure; Check fields use their own). */
.stf-hint-only .help-box {
	display: none;
}

.stf-hint-icon {
	border: none;
	background: none;
	padding: 0 2px;
}

/* Store Transfer — Scan Barcode gets real width (~half the row); Prompt Qty
   and Scan Mode only need a fraction of that once their description text
   moves to the hover hint above. Scoped to .stf-scan-row (added only to
   Store Transfer's own scan/options section in store_transfer.js), never a
   bare .form-column selector that could reflow other doctypes' forms. */
/* !important: each .form-column also carries a Bootstrap col-sm-N class
   (frappe/form/column.js) of equal specificity that would otherwise tie
   with this rule depending on stylesheet load order -- this is a narrow,
   deliberate override of that one compound rule, not a general escape
   hatch (same pattern already used above for .app-logo).
   Wrapped in the same min-width Bootstrap's own col-sm-N uses (576px --
   frappe/public/scss/desk/variables.scss $grid-breakpoints) so a narrow
   viewport/sidebar-open width still falls back to Bootstrap's own natural
   full-width stacking instead of being forced into cramped 50/25/25
   columns with no room to breathe. */
@media (min-width: 576px) {
	.stf-scan-row.form-section > .section-body > .form-column:nth-child(1) {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
	.stf-scan-row.form-section > .section-body > .form-column:nth-child(2),
	.stf-scan-row.form-section > .section-body > .form-column:nth-child(3) {
		flex: 0 0 25% !important;
		max-width: 25% !important;
	}
}

/* Prompt Qty / Strict Scan Mode are Check fields -- checkbox + label sit on
   one line with no "label above input" structure, unlike Scan Barcode
   (label line, then input below). Nudge them down to line up with Scan
   Barcode's INPUT row rather than its label row. */
.stf-scan-row .stf-hint-only {
	margin-top: 26px;
}

/* Store Transfer — Items grid's search box (left) + Export button (right)
   share one toolbar row above the grid. Scoped to .stf-item-toolbar, added
   only to this grid's own .grid-custom-buttons container. */
.stf-item-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.stf-item-toolbar .stf-item-filter-input {
	max-width: 320px;
}

/* Store Transfer — the basic-detail section (Dispatching Warehouse card /
   Destination Shop / Transit Distance), relocated by store_transfer.js's
   relocate_basic_details to sit above the tab bar instead of inside a tab.
   A light separator makes clear it's document-wide, not tab content. */
.stf-basic-details-above-tabs {
	border-bottom: 1px solid var(--border-color, #d1d8dd);
	padding-bottom: var(--padding-md, 12px);
	margin-bottom: var(--margin-md, 12px);
	/* Establish a stacking context above the Items grid below it (which
	   gives its own sticky heading row z-index: 1 -- frappe/public/scss/
	   common/grid.scss). Without this, the Shop field's Awesomplete
	   dropdown (z-index: 4, but scoped to whatever stacking context this
	   section sits in) can end up rendering behind the grid instead of
	   above it, since relocate_basic_details() moved this section earlier
	   in the DOM than the grid it now needs to outrank. */
	position: relative;
	z-index: 999 !important;
}

/* Belt-and-suspenders on the dropdown itself, not just its ancestor --
   directly overrides awesomeplete.scss's z-index: 4 so this can't lose to
   anything else on the page regardless of exactly which ancestor ends up
   establishing the deciding stacking context. */
.stf-basic-details-above-tabs .awesomplete > [role="listbox"] {
	z-index: 9999 !important;
}

/* Three unequal columns: warehouse card widest, shop next, distance
   narrowest -- matches the reference layout. !important for the same
   reason as .stf-scan-row above (overriding column.js's own col-sm-N).
   Same 576px floor as .stf-scan-row above, for the same reason: below it,
   fall back to Bootstrap's own natural full-width stacking. */
@media (min-width: 576px) {
	.stf-basic-details-above-tabs.form-section > .section-body > .form-column:nth-child(1) {
		flex: 0 0 40% !important;
		max-width: 40% !important;
	}
	.stf-basic-details-above-tabs.form-section > .section-body > .form-column:nth-child(2) {
		flex: 0 0 38% !important;
		max-width: 38% !important;
	}
	.stf-basic-details-above-tabs.form-section > .section-body > .form-column:nth-child(3) {
		flex: 0 0 22% !important;
		max-width: 22% !important;
	}
}

/* "Dispatching Warehouse (Origin)" card */
.stf-basic-card {
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: var(--border-radius-md, 8px);
	padding: 10px 14px;
	background: var(--card-bg, var(--fg-color));
}
.stf-basic-card-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 4px;
}
.stf-basic-card-value {
	font-size: var(--text-md);
}
.stf-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green-500, #29a745);
	margin-right: 6px;
}
.stf-basic-card-sub {
	font-size: var(--text-xs);
	margin-top: 2px;
}

/* Destination Shop / Store — box the real Link control's wrapper to match
   the two cards either side of it. */
.stf-basic-shop-box .control-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	text-transform: none;
}
.stf-basic-shop-box .input-with-feedback,
.stf-basic-shop-box select {
	border-radius: var(--border-radius-md, 8px);
}

/* Transit Distance box, styled to read as a disabled input until a shop
   picks a real value. */
.stf-distance-box {
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: var(--border-radius-md, 8px);
	padding: 6px 10px;
	background: var(--control-bg);
	color: var(--text-muted);
}
.stf-distance-icon {
	margin-right: 6px;
}

/* Items grid — persistent flag on an ENTIRE row while its requested qty
   exceeds available stock (store_transfer.js's check_row_stock). A toast
   alone fades in a few seconds; this stays visible until the qty is
   corrected or the row removed. Live warning only -- typing/adding the row
   itself is never blocked; the actual block on Save is the doctype's own
   validate() (client, see store_transfer.js) plus the existing server-side
   _validate_qty_against_stock(), regardless of this class. */
/* Each grid cell (.grid-static-col) carries its own opaque
   background-color: var(--fg-color) (frappe/public/scss/common/grid.scss),
   which paints over a background set on the row itself -- confirmed
   directly (a row-level background alone was applying but invisible).
   Target the cells, not just the row, to actually beat that. */
.stf-insufficient-stock-row,
.stf-insufficient-stock-row .col {
	background-color: var(--red-50, #fff1f0) !important;
}

/* Item Name list, parked under the cell but still an .awesomplete list so
   the rows match Item Code: left aligned, same padding, selected row shaded. */
.suvasa-item-name-dropdown {
	position: fixed;
	z-index: 2000;
	margin: 0;
	padding: 0;
}
.suvasa-item-name-dropdown > ul {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	transform: none !important;
	margin: 0 !important;
	text-align: left;
}
.suvasa-item-name-dropdown > ul[hidden] {
	display: none !important;
}
.suvasa-item-name-dropdown > ul > [role="option"] {
	text-align: left;
}

/* Query-report filters hide their label. These two date ranges need it
   above the picker, and the other filters must share the picker's baseline
   so Store / Category don't sit next to the label. */
#page-query-report .page-form:has(.suvasa-labeled-filter) {
	align-items: flex-end;
}

#page-query-report .page-form .suvasa-labeled-filter {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 0 0 240px;
	width: 240px;
	max-width: 240px;
	min-width: 240px;
}

#page-query-report .page-form .suvasa-labeled-filter .control-label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--text-xs);
	line-height: 1.2;
}

/* Phone fields (Customer Mobile): the stock control leaves 30px for the flag
   and "+91", so typed digits sat on top of the code, and inside a dialog the
   flag dropped below centre. Give the code room and centre it everywhere. */
.frappe-control[data-fieldtype="Phone"] .control-input input {
	padding-left: 78px;
}
.frappe-control[data-fieldtype="Phone"] .control-input .selected-phone,
.modal-body .frappe-control[data-fieldtype="Phone"] .control-input .selected-phone {
	top: 0;
	bottom: 0;
	height: 20px;
	margin: auto 0;
}
.frappe-control[data-fieldtype="Phone"] .selected-phone .country {
	align-items: center;
	line-height: 20px;
}

/* New Customer dialog: each row is its own section (keeps the two columns
   aligned), so drop Frappe's per-section padding to avoid large gaps. */
.suvasa-customer-dialog .modal-body .form-section {
	padding-top: 0;
	padding-bottom: 0;
}
.suvasa-customer-dialog .modal-body .form-section:first-child {
	padding-top: var(--padding-sm);
}
.suvasa-customer-dialog .modal-body .form-section .section-body {
	margin-top: 0;
	padding-top: 0;
}
.suvasa-customer-dialog .modal-body .frappe-control {
	margin-bottom: 0;
}
.suvasa-customer-dialog .modal-body .form-group {
	margin-bottom: 10px;
}
/* The consent tick sits beside Anniversary; line it up with the date box. */
.suvasa-customer-dialog .frappe-control[data-fieldname="marketing_consent"] {
	padding-top: 30px;
}

/* Customer 360 (Customer form > Overview). */
.suvasa-overview-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.suvasa-overview-card {
	text-align: left;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: 12px 14px;
	cursor: pointer;
}
.suvasa-overview-card:hover,
.suvasa-overview-card:focus-visible {
	border-color: var(--primary);
	outline: none;
}
.suvasa-overview-label {
	font-size: var(--text-sm);
	color: var(--text-muted);
}
.suvasa-overview-value {
	font-size: var(--text-xl);
	font-weight: 600;
	margin: 4px 0 2px;
}
.suvasa-overview-hint {
	font-size: var(--text-xs);
	color: var(--text-light);
}
.suvasa-overview-heading {
	font-weight: 600;
	margin-bottom: 2px;
}
.suvasa-overview-summary {
	font-size: var(--text-sm);
	margin-bottom: 8px;
}
.suvasa-overview-bill {
	cursor: pointer;
}
.suvasa-overview-bill:hover,
.suvasa-overview-bill:focus {
	background: var(--highlight-color);
	outline: none;
}
.suvasa-overview-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px 16px;
	padding: 12px 14px;
	margin-bottom: 20px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	background: var(--subtle-fg);
}
.suvasa-overview-stat-value {
	font-weight: 600;
	margin-top: 2px;
}
.suvasa-overview-table {
	margin-top: 8px;
}

/* Billing screen: a customer's Advance / Credit Note / Due (pos_extend.js). */
.point-of-sale-app .suvasa-pos-balances {
	margin-top: var(--margin-md);
}
.point-of-sale-app .suvasa-pos-balance {
	display: flex;
	justify-content: space-between;
	padding: var(--padding-xs) 0;
	border-bottom: 1px solid var(--border-color);
	font-weight: 500;
}

/* Billing screen key bar (pos_extend.js make_keybar). The screen's panels are
   shortened by the bar's height so nothing scrolls. */
.point-of-sale-app.suvasa-has-keybar section {
	height: calc(100vh - 7.5rem);
	max-height: calc(100vh - 7.5rem);
}
.suvasa-pos-keybar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-xs) var(--margin-lg);
	padding: var(--padding-xs) 1%;
	border-top: 1px solid var(--border-color);
	color: var(--text-muted);
	font-size: var(--text-sm);
}
.suvasa-pos-keybar kbd {
	background: var(--control-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	box-shadow: none;
	padding: 1px 6px;
	font-size: var(--text-xs);
	font-weight: 600;
}
.suvasa-pos-keybar .suvasa-pos-key-off {
	opacity: 0.4;
}

/* Close Shift (POS Closing Entry, pos_closing_entry.js). */
.suvasa-shift-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-xs) var(--margin-xl);
	margin-bottom: var(--margin-md);
	color: var(--text-muted);
}
.suvasa-shift-strip b {
	color: var(--text-color);
}
.suvasa-shift-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--margin-sm);
}
.suvasa-shift-card {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--padding-sm) var(--padding-md);
}
.suvasa-shift-card-label {
	color: var(--text-muted);
	font-size: var(--text-sm);
}
.suvasa-shift-card-value {
	font-size: var(--text-xl);
	font-weight: 600;
}
.suvasa-shift-card-note {
	color: var(--text-muted);
	font-size: var(--text-xs);
}
.suvasa-closing-count {
	max-width: 420px;
	margin-top: var(--margin-md);
}
.suvasa-tally-mode {
	margin-bottom: var(--margin-lg);
}
.suvasa-tally-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-xs) var(--margin-lg);
	padding-bottom: var(--padding-xs);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--margin-xs);
}

/* Billing screen: barcode on product cards, facts in product details. */
.point-of-sale-app .suvasa-item-barcode {
	color: var(--text-muted);
	font-size: var(--text-xs);
}
.point-of-sale-app .suvasa-item-facts {
	font-size: var(--text-sm);
	margin-top: var(--margin-xs);
}

/* Gift vouchers at the counter (pos_gift_voucher.js). */
.suvasa-gv-totals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-xs) var(--margin-xl);
}
.point-of-sale-app .suvasa-gv-hint {
	font-size: var(--text-xs);
}

/* Billing screen: GST inside the selected line's price (pos_extend.js). */
.point-of-sale-app .suvasa-item-tax {
	margin-top: var(--margin-md);
	max-width: 420px;
}
.point-of-sale-app .suvasa-item-tax-title {
	font-weight: 600;
	margin-bottom: var(--margin-xs);
}
.point-of-sale-app .suvasa-item-tax .suvasa-item-tax-total td {
	font-weight: 600;
}

/* Billing screen: discount worked out in the totals (pos_discount.js). */
.point-of-sale-app .suvasa-discount-calc,
.point-of-sale-app .suvasa-round-off {
	width: 100%;
}
.point-of-sale-app .suvasa-calc-row {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 2px 0;
}
.point-of-sale-app .suvasa-calc-strong {
	font-weight: 600;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 4px;
}
.point-of-sale-app .suvasa-calc-note {
	font-size: var(--text-xs);
}
.point-of-sale-app .suvasa-remove-discount {
	margin-left: var(--margin-sm);
	color: var(--red-500);
}

/* Reports heading above Sale and Stock: a line, then the title,
   then the groups. Hidden in the icon rail, where there is no room
   for the word. */
.body-sidebar .suvasa-nav-rule {
	border-top: 1px solid var(--border-color);
	margin: 8px 12px 4px;
}
.body-sidebar .suvasa-nav-heading {
	padding: 8px 12px 2px;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-color);
	pointer-events: none;
	user-select: none;
}
.body-sidebar-container:not(.expanded) .suvasa-nav-heading,
.body-sidebar-container:not(.expanded) .suvasa-nav-rule {
	display: none;
}

/* Report tables (handbook 05, responsive): the desk gives every report table a
   fixed box of 100vh - 240px, so a short table leaves an empty gap below its
   rows. Reports that use suvasa.report_layout set --suvasa-dt-height to what
   their rows need (capped at one screen) before the table draws its rows. */
#page-query-report .datatable .dt-scrollable.suvasa-fit-height {
	height: var(--suvasa-dt-height) !important;
}

/* Row numbers: the table sizes the number column for the digits + 22 px, but
   the desk pads it 0.5rem a side, so 10, 11 ... show as "1...". */
#page-query-report .datatable .dt-cell__content--col-0,
#page-query-report .datatable .dt-cell__content--header-0 {
	padding-left: 4px;
	padding-right: 4px;
	text-overflow: clip;
}

/* Finished Item list: no comment icon and no heart on the rows or the header. */
.suvasa-finished-item-list .comment-count,
.suvasa-finished-item-list .list-row-like,
.suvasa-finished-item-list .list-liked-by-me {
	display: none !important;
}