/* ============================================================
   Customer portal — "Сервизна книжка"
   Light, royal blue, continuation of the printed documents.
   Palette: royal #1a4fa0 · ice #e8f0fc · line #e3e9f2 · ink #1f2937
   ============================================================ */

body {
	background: #f6f8fb;
	color: #1f2937;
}

/* ── Top navbar ── */
.navbar {
	background: #ffffff;
	border-bottom: 3px solid #1a4fa0;
}

.navbar .navbar-brand {
	color: #1a4fa0;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.navbar .navbar-brand img {
	height: 30px;
	width: auto;
	display: block;
}

.navbar .nav-link {
	color: #52627a;
	font-weight: 550;
}

.navbar .nav-link:hover {
	color: #1a4fa0;
}

/* ── Portal menu — horizontal bar above the content ── */
/* frappe puts the menu in a col-sm-2 next to the col-sm-10 content; making
   both columns full-width wraps the row: menu bar on top, content below */
.sidebar-column,
.main-column {
	flex: 0 0 100%;
	max-width: 100%;
}

/* frappe hides the sidebar column below 992px — the top bar must stay */
.sidebar-column {
	display: block;
}

.web-sidebar {
	position: static;
	padding: 6px 8px;
	margin-top: 16px;
	background: #ffffff;
	border: 1px solid #e3e9f2;
	border-radius: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.web-sidebar::-webkit-scrollbar {
	display: none;
}

.web-sidebar .sidebar-items {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: max-content;
}

.web-sidebar .sidebar-items ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}

/* the trailing list is "My Account" — keep it on the right edge */
.web-sidebar .sidebar-items ul:last-child {
	margin-left: auto;
	padding-left: 16px;
}

/* the content nests its own .container inside the full-width column, adding a
   second gutter — flatten it so the content lines up with the menu bar */
.main-column main.container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.web-sidebar .sidebar-item a {
	display: block;
	margin: 0;
	white-space: nowrap;
	color: #52627a;
	font-weight: 550;
	font-size: 14px;
	padding: 7px 12px;
	border-radius: 6px;
	text-decoration: none;
}

.web-sidebar .sidebar-item a:hover {
	color: #1a4fa0;
	background: #eef3fb;
}

.web-sidebar .sidebar-item a.active {
	color: #1a4fa0;
	background: #e8f0fc;
	font-weight: 700;
}

/* ── Page header ── */
.page-header h1,
.page-header h3,
.my-account-header {
	color: #17233a;
	font-weight: 750;
}

/* the top menu already highlights where you are — drop the duplicated
   list-page heading and pull the list up (detail pages keep their title) */
#page-portal .page-header-wrapper,
#page-my_reminders .page-header-wrapper {
	display: none;
}

#page-portal .web-list-item:first-child {
	margin-top: 0;
}

/* ── List rows as cards ── */
/* Bootstrap's .row pulls itself -15px past the card padding, pinning the row's
   text to the card edges (frappe's native /quotations and /invoices rows). */
.web-list-item .row {
	margin-right: 0;
	margin-left: 0;
}

.website-list {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.web-list-item {
	background: #ffffff;
	border: 1px solid #e3e9f2;
	border-radius: 8px;
	margin-bottom: 10px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.web-list-item:first-child {
	margin-top: 1.25rem;
}

.web-list-item:hover {
	border-color: #1a4fa0;
	box-shadow: 0 0 0 1px #1a4fa0;
}

.web-list-item > a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	align-items: center;
	padding: 13px 16px;
	color: inherit;
}

.portal-card-id {
	font-weight: 700;
	color: #1a4fa0;
}

.portal-card-sub {
	color: #74839a;
	font-size: 12.5px;
}

.portal-card-side {
	text-align: right;
}

.portal-card-amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.portal-card-date {
	color: #74839a;
	font-size: 12.5px;
}

.web-list-item .indicator-pill {
	margin-top: 6px;
}

/* ── Status pills (frappe indicator colors → document palette) ── */
.indicator-pill {
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 10px;
}

.indicator-pill.green {
	background: #e5f4ea;
	color: #1c7c3d;
}

.indicator-pill.blue {
	background: #e8f0fc;
	color: #1a4fa0;
}

.indicator-pill.orange,
.indicator-pill.yellow {
	background: #fdf1e2;
	color: #b06212;
}

.indicator-pill.red {
	background: #fdeaea;
	color: #b02a2a;
}

.indicator-pill.gray,
.indicator-pill.grey {
	background: #eef1f5;
	color: #52627a;
}

/* ── Native /quotations and /invoices lists (erpnext transaction rows) ── */
.web-list-item .list-item-name {
	font-weight: 700;
	color: #1a4fa0;
}

.web-list-item .text-muted {
	color: #74839a !important;
	font-size: 12.5px;
}

.transaction-list-item {
	padding: 13px 16px;
}

.web-list-item .item-total {
	font-variant-numeric: tabular-nums;
}

/* ── Native /quotations and /invoices detail (erpnext order page) ── */
.order-container {
	background: #ffffff;
	border: 1px solid #e3e9f2;
	border-radius: 8px;
	padding: 20px 22px;
}

.order-container .order-item-header {
	background: #1a4fa0;
	color: #ffffff;
	border-radius: 6px;
	padding: 7px 4px;
	font-weight: 650;
}

.order-container .order-item-header,
.order-container .order-item-header .text-muted {
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 650;
}

/* no product images in the shop's flow — drop the empty image placeholder */
.order-container .order-image-col {
	display: none;
}

.order-container .item_name_and_description .col-xs-8 {
	flex: 0 0 100%;
	max-width: 100%;
}

.order-container .order-items:not(.order-item-header) {
	padding: 10px 4px;
	border-bottom: 1px solid #e3e9f2;
	margin: 0;
}

.order-container .order-taxes {
	margin-top: 14px;
}

/* bootstrap's .row pulls the item rows -15px past the card edge; keep them flush
   so the amount column and the totals below share the same right edge */
.order-container .row {
	margin-right: 0;
	margin-left: 0;
}

/* normalize the totals rows: erpnext lays them out with inconsistent offsets,
   so pin every row to the card's right edge with the items' own cell padding */
.order-container .order-taxes {
	display: flex;
	justify-content: flex-end;
	width: 100% !important;
	margin-right: 0 !important;
}

.order-container .order-taxes > .col-4 {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 320px;
	margin-right: 0 !important;
	padding-right: 19px !important;
}

/* money never wraps mid-number; the name column does the shrinking instead */
.order-container .order-items .order-rate,
.order-container .order-items > .col-2,
.order-container .order-taxes .col-4,
.order-container .order-taxes .col-8 {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.order-container .order-items .order-item-name {
	overflow-wrap: anywhere;
}

/* ── Detail pages ── */
.portal-detail {
	background: #ffffff;
	border: 1px solid #e3e9f2;
	border-radius: 8px;
	padding: 22px 24px;
}

.portal-detail .table {
	font-size: 14px;
}

.portal-detail .table th {
	color: #74839a;
	font-weight: 550;
	border-top: none;
}

.portal-detail .table td {
	font-weight: 600;
	border-top: none;
	border-bottom: 1px solid #e3e9f2;
}

.portal-detail .table th {
	border-bottom: 1px solid #e3e9f2;
}

/* items table matches the invoice detail: blue rounded header bar,
   borderless rows with thin separators */
.portal-detail .table-bordered {
	border: none;
}

.portal-detail .table-bordered thead th {
	background: #1a4fa0;
	color: #ffffff;
	font-weight: 650;
	font-size: 13px;
	border: none;
	padding: 8px 10px;
}

.portal-detail .table-bordered thead th:first-child {
	border-radius: 6px 0 0 6px;
}

.portal-detail .table-bordered thead th:last-child {
	border-radius: 0 6px 6px 0;
}

.portal-detail .table-bordered tbody td {
	font-weight: 500;
	border: none;
	border-bottom: 1px solid #e3e9f2;
	padding: 10px;
}

.portal-detail h3 {
	font-size: 16px;
	font-weight: 700;
	color: #17233a;
	margin-top: 1.5rem;
}

/* ── Reminders page ── */
.rem-section-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #74839a;
	margin: 1.5rem 0 10px;
}

.rem-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border: 1px solid #e3e9f2;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 10px;
}

.rem-datebox {
	flex: 0 0 54px;
	text-align: center;
	background: #e8f0fc;
	color: #1a4fa0;
	border-radius: 8px;
	padding: 7px 0 6px;
}

.rem-day {
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.rem-month {
	font-size: 11px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

.rem-check {
	flex: 0 0 36px;
	height: 36px;
	border-radius: 50%;
	background: #e5f4ea;
	color: #1c7c3d;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rem-body {
	flex: 1 1 0;
	min-width: 0;
}

.rem-desc {
	font-weight: 650;
	color: #17233a;
}

.rem-past .rem-desc {
	color: #52627a;
	font-weight: 550;
}

.rem-car {
	color: #74839a;
	font-size: 12.5px;
}

.rem-when {
	margin-left: auto;
	white-space: nowrap;
	font-size: 12.5px;
	color: #74839a;
}

.rem-upcoming .rem-when {
	color: #1a4fa0;
	font-weight: 700;
}

.rem-empty {
	color: #74839a;
	font-size: 13.5px;
	padding: 6px 2px;
}

/* fired reminder the customer has not opened yet — the "missed call" look */
.rem-missed {
	border-color: #f0b4b4;
	background: #fff8f8;
}

.rem-missed .rem-desc {
	color: #b02a2a;
	font-weight: 700;
}

.rem-missed .rem-when {
	color: #b02a2a;
	font-weight: 700;
}

.rem-alert {
	flex: 0 0 36px;
	height: 36px;
	border-radius: 50%;
	background: #fdeaea;
	color: #b02a2a;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: rem-pulse 1.6s ease-in-out infinite;
}

@keyframes rem-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(176, 42, 42, 0.35);
	}
	50% {
		box-shadow: 0 0 0 7px rgba(176, 42, 42, 0);
	}
}

.rem-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 9px;
}

.rem-btn {
	font-size: 12.5px;
	font-weight: 650;
	padding: 4px 12px;
	border-radius: 6px;
}

.rem-btn-book {
	background: #1a4fa0;
	border: 1px solid #1a4fa0;
	color: #ffffff;
}

.rem-btn-book:hover {
	background: #163f80;
	color: #ffffff;
}

.rem-btn-seen {
	background: #ffffff;
	border: 1px solid #c8d8f0;
	color: #1a4fa0;
}

.rem-btn-seen:hover {
	background: #e8f0fc;
	color: #1a4fa0;
}

.rem-booked {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	color: #1c7c3d;
	background: #e5f4ea;
	border-radius: 999px;
	padding: 2px 10px;
}

/* ── Totals under the items table: a right-aligned block whose values line up
   exactly with the items' amount column ── */
.portal-detail .portal-totals {
	width: auto;
	min-width: 320px;
	margin-left: auto;
	margin-bottom: 0;
}

.portal-detail .portal-totals td {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	padding: 6px 10px;
}

.portal-detail .portal-totals th {
	padding: 6px 10px;
}

/* ── Footer: no "Powered by ERPNext" ── */
.web-footer .footer-powered {
	display: none;
}

/* ── Buttons (print / actions) ── */
.page-header-actions-block .btn,
.portal-detail .btn {
	background: #ffffff;
	border: 1px solid #c8d8f0;
	color: #1a4fa0;
	font-weight: 650;
}

.page-header-actions-block .btn:hover {
	background: #e8f0fc;
	color: #1a4fa0;
}

/* ── Breadcrumbs ── */
.page-breadcrumbs .breadcrumb-container a {
	color: #74839a;
}

.page-breadcrumbs .breadcrumb-container a:hover {
	color: #1a4fa0;
}

/* ── Responsive ── */
/* long unbroken values (document ids, VINs) must wrap instead of forcing
   a horizontal page scroll */
.page_content {
	overflow-wrap: break-word;
}

/* the page header is a flex row; let the title shrink and wrap instead of
   running under the Actions button */
.page-header-wrapper {
	flex-wrap: wrap;
	gap: 8px;
}

.page-header {
	min-width: 0;
}

.page-header h3 {
	overflow-wrap: anywhere;
}

.page-header-actions-block .row {
	margin-right: 0;
	margin-left: 0;
}

/* the hamburger relies on frappe's #icon-menu sprite, which is not loaded on
   website pages — draw our own */
.navbar .navbar-toggler {
	border: 1px solid #c8d8f0;
	border-radius: 6px;
	padding: 7px 9px;
}

.navbar .navbar-toggler svg {
	display: none;
}

.navbar .navbar-toggler > span {
	display: block;
	width: 20px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath stroke='%231a4fa0' stroke-width='2' stroke-linecap='round' d='M1 1h18M1 7h18M1 13h18'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

@media (max-width: 767px) {
	.web-list-item > a {
		padding: 12px 14px;
	}

	.portal-detail {
		padding: 16px;
	}
}

@media (max-width: 576px) {
	.page-header h3,
	.my-account-header {
		font-size: 20px;
	}

	/* erpnext order page: the status pill (col-10) leaves the customer name a
	   sliver (col-2); split the row 50/50 instead */
	.page_content .indicator-container > .col-10,
	.page_content .indicator-container > .col-2 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* items grid: the Quantity column is hidden on small screens, so give its
	   space to the name and price columns and drop the huge indents */
	.order-container .order-items > .col-5 {
		flex: 0 0 40%;
		max-width: 40%;
	}

	.order-container .order-items > .col-2 {
		flex: 0 0 30%;
		max-width: 30%;
	}

	.order-container .order-items .pl-10,
	.order-container .order-items > .pl-10,
	.order-container .order-items .pl-4 {
		padding-left: 6px !important;
	}

	.order-container {
		padding: 14px;
	}

	/* the desktop min-widths that pin totals under the amount column don't fit
	   a phone-wide card — let every totals row span the card instead:
	   label left, value right */
	.order-container .order-taxes > .col-4 {
		min-width: 0;
		width: 100%;
		padding-left: 15px !important;
		padding-right: 9px !important;
	}

	.portal-detail .portal-totals {
		min-width: 0;
		width: 100%;
	}

	/* the relative-time label moves under the description, aligned with it */
	.rem-card {
		flex-wrap: wrap;
	}

	.rem-when {
		flex-basis: 100%;
		margin-left: 68px;
		margin-top: -4px;
	}

	.rem-past .rem-when {
		margin-left: 50px;
	}
}