/*
 * Agropak Theme Extension
 * Companion stylesheet for Swift Theme (swift_theme app).
 * Swift Theme does not support custom CSS/JS injection by design;
 * this app is installed after it and layers targeted fixes on top.
 */

:root {
	--agropak-radius-lg: 14px;
	--agropak-radius-md: 12px;
	--agropak-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
	--agropak-shadow-card-hover: 0 2px 6px rgba(16, 24, 40, 0.10), 0 8px 20px rgba(16, 24, 40, 0.10);
	--agropak-text-heading: #101f2d;
	--agropak-text-muted: #6c7684;
}

/* ==== List View: page card ==== */
.layout-main-section {
	border-radius: var(--agropak-radius-lg) !important;
	box-shadow: var(--agropak-shadow-card) !important;
	border: 1px solid rgba(16, 24, 40, 0.06) !important;
}

/* ==== List View: page title hierarchy ==== */
.page-head .page-title .title-area .navbar-breadcrumbs .title-text,
.page-head .title-area a.title-text {
	color: var(--agropak-text-heading) !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	letter-spacing: -0.01em !important;
}

/* ==== List View: column header row ==== */
.list-row-head {
	text-transform: uppercase !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	color: var(--agropak-text-muted) !important;
}
.list-row-head .list-row-container,
.list-row-container:has(.list-row-head) {
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* ==== List View: data rows — flatten the noisy per-row shadow/radius, use the outer card instead ==== */
.list-row-container {
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background-color 0.12s ease;
}
.list-row-container:hover {
	background-color: #f8fafc !important;
}
.list-row-container:first-child {
	border-top-left-radius: var(--agropak-radius-lg) !important;
	border-top-right-radius: var(--agropak-radius-lg) !important;
}
.list-row-container:last-child {
	border-bottom-left-radius: var(--agropak-radius-lg) !important;
	border-bottom-right-radius: var(--agropak-radius-lg) !important;
	border-bottom: none !important;
}

/* ==== List View: pagination controls ==== */
.list-paging-area .btn {
	border-radius: 8px !important;
}

/* ============================================================
   Form View
   ============================================================ */

/* Current record name in the breadcrumb (e.g. 'Gurpreet Kaur') */
.navbar-breadcrumbs .title-text-form {
	color: var(--agropak-text-heading) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
}

/* Form sections: give the flat bordered boxes a soft elevated-card feel */
.form-section.card-section {
	border-radius: var(--agropak-radius-md) !important;
	box-shadow: var(--agropak-shadow-card) !important;
	border: 1px solid rgba(16, 24, 40, 0.06) !important;
}

/* Section heading label inside a form section */
.form-section .section-head {
	color: var(--agropak-text-heading) !important;
	font-weight: 700 !important;
}

/* Form tabs: make the active tab unmistakable */
.form-tabs .nav-link {
	font-weight: 500 !important;
	color: var(--agropak-text-muted) !important;
}
.form-tabs .nav-link.active {
	font-weight: 700 !important;
	color: var(--agropak-text-heading) !important;
	border-bottom: 2px solid #0176d3 !important;
}

/* Sidebar quick-action rows (Assign / Attachments / Tags / Share) */
.form-sidebar .form-sidebar-label {
	border-radius: 8px !important;
	padding: 4px 6px !important;
	margin: 0 -6px !important;
	transition: background-color 0.12s ease;
}
.form-sidebar .sidebar-section:hover .form-sidebar-label {
	background-color: #f8fafc !important;
}

/* ============================================================
   Workspace Dashboard (e.g. Stock)
   ============================================================ */

/* Unify radius/shadow across chart, number-card and link-list widgets */
.dashboard-widget-box,
.number-widget-box,
.links-widget-box {
	border-radius: var(--agropak-radius-md) !important;
	box-shadow: var(--agropak-shadow-card) !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dashboard-widget-box:hover,
.number-widget-box:hover,
.links-widget-box:hover {
	box-shadow: var(--agropak-shadow-card-hover) !important;
}

/* Widget group / section headings (e.g. 'Masters & Reports') */
.workspace-header-title, .widget-group .h5, .widget-group h4 {
	color: var(--agropak-text-heading) !important;
	font-weight: 700 !important;
}

/* ============================================================
   Global bug fix: <select> text clipped everywhere
   Swift Theme sets select.form-control to a fixed height (28px)
   that is shorter than its own line-height (21px + 12px padding
   = 33px), so the option text renders clipped/hidden at the top.
   ============================================================ */
select.form-control,
.frappe-control[data-fieldtype='Select'] select {
	line-height: 1.3 !important;
	height: 32px !important;
}

/* ============================================================
   Workspace left sidebar (module nav): more breathing room
   between items, which previously sat ~3px apart with no
   internal padding or icon/label gap.
   ============================================================ */
.standard-sidebar-item {
	margin: 3px 8px !important;
}
.standard-sidebar-item .item-anchor {
	height: 32px !important;
	padding: 0 10px !important;
	gap: 10px !important;
	border-radius: 8px !important;
}

/* ============================================================
   Workspace 'links' cards (Settings / Key Reports / etc.):
   rows sat 12px apart with 4px padding and no hover affordance,
   which reads as a dense wall of text across a 3-up grid.
   ============================================================ */
.links-widget-box {
	padding: 18px 16px !important;
}
.links-widget-box .widget-head {
	margin-bottom: 12px !important;
}
.links-widget-box .link-item {
	margin: 6px 0 0 -8px !important;
	padding: 6px 8px !important;
	border-radius: 6px !important;
	transition: background-color 0.12s ease;
}
.links-widget-box .link-item:hover {
	background-color: #f8fafc !important;
}

/* ============================================================
   List view: hover-row artifacts, double borders, row density
   ============================================================ */

/* The comment/like/last-modified pill on the right of each row carries
   a hardcoded box-shadow from Frappe core (-5px 0 5px rgb(248,248,248)),
   meant as a fade-out hint for horizontal scroll, plus its own light
   background. Both render as a solid grey/white box that reads as a
   stray border - present at all times, not just on hover. Remove both,
   always. */
.level-right {
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* Each row was carrying three overlapping borders (its own border-top
   AND border-bottom, plus the inner .list-row's own border-bottom),
   which is what read as 'double lines' between rows. Keep exactly one. */
.list-row-container {
	border-top: none !important;
}
.list-row-container .list-row {
	border-bottom: none !important;
}

/* Slightly tighter rows, plus a subtle zebra stripe so long lists are
   easier to scan without needing the hover highlight. */
.list-row-col,
.list-row .list-subject {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
.list-row-container:nth-child(even) {
	background-color: #eef1f4 !important;
}

/* ============================================================
   Login page (web_include_css - reaches www pages, not just Desk)
   ============================================================ */

/* Real button, not a bare link styled as .btn-default: solid primary
   fill, comfortable height, clear hover state. */
.btn-keycloak {
	background-color: #0176d3 !important;
	border-color: #0176d3 !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	padding: 10px 16px !important;
	border-radius: 10px !important;
	text-align: center !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}
.btn-keycloak:hover {
	background-color: #014486 !important;
	border-color: #014486 !important;
	color: #ffffff !important;
}

/* Card rhythm: more breathing room between the logo/heading block and
   the button, and a bit more card padding overall. */
.login-content.page-card {
	padding: 32px !important;
}
.page-card-head {
	margin-bottom: 28px !important;
}
.page-card-head .app-logo {
	width: 56px !important;
	height: 56px !important;
	margin-bottom: 16px !important;
}
.social-logins {
	margin-top: 8px !important;
}

/* ============================================================
   Injected brand mark (see agropak_theme_ext.js) - icon-only
   square favicon, sized to sit as a small fixed mark above the
   workspace switcher, not a full-width wordmark.
   ============================================================ */
.agropak-brand-logo {
	display: block;
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	object-fit: contain;
	margin: 12px 0 0 16px !important;
}

/* ============================================================
   Login page follow-up fixes (found via a real guest-view check,
   not visible from an authenticated Desk session)
   ============================================================ */

/* The button text was inheriting anchor-tag underline. */
.btn-keycloak {
	text-decoration: none !important;
}

/* Swift's own login JS injects a '<span class="swift-login-divider">
   or login with</span>' meant for when this sits below a password
   form. With disable_user_pass_login on, Keycloak is the only option,
   so 'or login with' has nothing to be 'or' to - just noise. */
.swift-login-divider {
	display: none !important;
}

/* The brand panel's body copy was capped at 544px while the heading
   above it runs the full panel width, so the paragraph and bullets
   looked cramped into a narrow column under a wide headline. */
.swift-brand-body {
	max-width: 640px !important;
}


/* ============================================================
   Custom Home Page brand header (Swift Theme's 'enable_home_page'
   feature - the one place brand_logo actually renders natively).
   The logo image already contains the 'agropak' wordmark, so the
   adjacent text span duplicated it.
   ============================================================ */
.swift-home-brand-name {
	display: none !important;
}

/* ============================================================
   Root cause fix: Swift Theme's color system never defines the
   --bg-<color>/--text-on-<color> CSS variables that Frappe core's
   indicator-pill / indicator-dot classes read (see
   frappe/public/scss/common/indicator.scss). Every status pill
   (Enabled, Overdue, Draft, Cancelled...) was rendering with an
   invalid var() - blank background, default grey text - since the
   underlying tokens simply didn't exist under Swift Theme. Defining
   them fixes every indicator variant at once, not just one class.
   ============================================================ */
:root {
	--bg-green: #e7f8f0;     --text-on-green: #22a06b;
	--bg-cyan: #e0f7fa;      --text-on-cyan: #00838f;
	--bg-blue: #eaf1fe;      --text-on-blue: #3b82f6;
	--bg-light-blue: #eaf1fe; --text-on-light-blue: #3b82f6;
	--bg-orange: #fff4e0;    --text-on-orange: #d68a00;
	--bg-yellow: #fff4e0;    --text-on-yellow: #d68a00;
	--bg-gray: #f7f7fa;      --text-on-gray: #8a8f98;
	--bg-grey: #f7f7fa;      --text-on-grey: #8a8f98;
	--bg-darkgrey: #eceef0;  --text-on-darkgrey: #5f6570;
	--bg-red: #fdecec;       --text-on-red: #e15554;
	--bg-pink: #fdecf3;      --text-on-pink: #d6336c;
	--bg-purple: #f1eefe;    --text-on-purple: #6c5ce7;
}

/* frappe_desk_theme's '.filterable.ellipsis { background: var(--table-body-bg) }'
   is meant for plain table cells but also matches indicator pills (they
   carry 'filterable ellipsis' too), silently wiping their colour at tied
   specificity. Out-specify it directly rather than edit that app's file. */
.indicator-pill.green.filterable.ellipsis   { background: var(--bg-green) !important; color: var(--text-on-green) !important; }
.indicator-pill.blue.filterable.ellipsis    { background: var(--bg-blue) !important; color: var(--text-on-blue) !important; }
.indicator-pill.light-blue.filterable.ellipsis { background: var(--bg-light-blue) !important; color: var(--text-on-light-blue) !important; }
.indicator-pill.orange.filterable.ellipsis  { background: var(--bg-orange) !important; color: var(--text-on-orange) !important; }
.indicator-pill.yellow.filterable.ellipsis  { background: var(--bg-yellow) !important; color: var(--text-on-yellow) !important; }
.indicator-pill.red.filterable.ellipsis     { background: var(--bg-red) !important; color: var(--text-on-red) !important; }
.indicator-pill.gray.filterable.ellipsis,
.indicator-pill.grey.filterable.ellipsis    { background: var(--bg-gray) !important; color: var(--text-on-gray) !important; }
.indicator-pill.darkgrey.filterable.ellipsis { background: var(--bg-darkgrey) !important; color: var(--text-on-darkgrey) !important; }
.indicator-pill.purple.filterable.ellipsis  { background: var(--bg-purple) !important; color: var(--text-on-purple) !important; }
.indicator-pill.pink.filterable.ellipsis    { background: var(--bg-pink) !important; color: var(--text-on-pink) !important; }

/* The brand logo (300x90 wordmark) was being forced into a 26x26 square
   by a more specific/later img rule, cropping almost all of it away.
   Let it size naturally from a fixed height so the wordmark reads. */
.swift-home-brand-logo {
	width: auto !important;
	height: 36px !important;
	max-width: none !important;
}

/* frappe_desk_theme's '.filterable.ellipsis { background-color:
   var(--table-body-bg) }' rule (meant for plain table cells) also
   catches ordinary filter links like 'Brand / Manufacturer' in list
   columns, giving them an unwanted solid white/light box. Neutralise
   it generally - the indicator-pill colour overrides above already
   out-specify this for status pills, so this only affects plain links. */
.filterable.ellipsis {
	background-color: transparent !important;
}