/**
 * Lucent Portal Override Styles
 * Harmonizes Frappe's default portal pages (/me, /orders, /invoices, /addresses, etc.)
 * with the Lucent design system.
 *
 * This file extends the design tokens from login.css and portal.css
 * and applies them to Frappe's standard portal elements.
 */

/* ============================================
   Section 1: CSS Variables (extend from login.css)
   ============================================ */
:root {
	--lucent-bg: #faf8f4;
	--lucent-card-bg: #fff;
	--lucent-border: #e8e4dc;
	--lucent-text: #333;
	--lucent-text-muted: #888;
	--lucent-text-light: #666;
	--lucent-primary: #1a1a1a;
	--lucent-input-bg: #fafafa;
	--lucent-hover-bg: #f5f3ef;
	--lucent-success: #4a7c59;
	--lucent-success-bg: #e8f5e9;
}

/* ============================================
   Section 2: Page Background & Layout
   ============================================ */

/* Apply warm background to body and main containers */
body {
	background-color: var(--lucent-bg) !important;
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	color: var(--lucent-text);
}

/* Main section background */
.main-section,
.page-content-wrapper,
[id^='page-'] {
	background-color: var(--lucent-bg) !important;
}

/* Container overrides for better spacing */
.container {
	max-width: 1200px;
}

/* Row with sidebar */
.row {
	margin-left: 0;
	margin-right: 0;
}

/* Main column content area */
.main-column {
	padding: 24px 32px;
}

/* ============================================
   Section 3: Navigation/Header Override
   ============================================ */

/* Main navbar styling */
nav.navbar,
.navbar {
	background-color: var(--lucent-bg) !important;
	border-bottom: 1px solid var(--lucent-border) !important;
	padding: 12px 24px !important;
	box-shadow: none !important;
}

.navbar-brand,
.navbar a.navbar-brand {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 24px !important;
	color: #000 !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}

.navbar-brand:hover {
	color: #000 !important;
	text-decoration: none !important;
}

/* Navbar links */
.navbar-nav .nav-link,
.navbar a {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 14px !important;
	color: var(--lucent-text-light) !important;
	transition: color 0.2s !important;
}

.navbar-nav .nav-link:hover,
.navbar a:hover {
	color: var(--lucent-text) !important;
}

.navbar-nav .nav-link.active,
.navbar a.active {
	color: #000 !important;
	font-weight: 500 !important;
}

/* User avatar/menu in header */
.navbar .avatar,
.navbar .dropdown-toggle {
	border: none !important;
}

/* ============================================
   Section 4: Sidebar Styling
   ============================================ */

/* Sidebar column */
.sidebar-column {
	background-color: var(--lucent-bg);
	border-right: 1px solid var(--lucent-border);
	padding: 24px 0 !important;
	min-height: calc(100vh - 60px);
}

/* Web sidebar container */
.web-sidebar {
	padding: 0 16px;
}

.web-sidebar .sidebar-items {
	padding: 0;
}

/* Sidebar list */
.web-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Sidebar items */
.web-sidebar .sidebar-item {
	margin-bottom: 4px;
}

.web-sidebar .sidebar-item a {
	display: block;
	padding: 10px 16px;
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 14px;
	color: var(--lucent-text-light);
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.2s;
}

.web-sidebar .sidebar-item a:hover {
	background-color: var(--lucent-hover-bg);
	color: var(--lucent-text);
	text-decoration: none;
}

.web-sidebar .sidebar-item a.active {
	background-color: var(--lucent-hover-bg);
	color: #000;
	font-weight: 500;
}

/* Sidebar group titles */
.web-sidebar .sidebar-group h6 {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lucent-text-muted);
	padding: 8px 16px;
	margin: 16px 0 8px 0;
}

/* ============================================
   Section 5: Page Titles & Typography
   ============================================ */

/* Main page title (h1) */
h1,
.page-header h1,
.main-column h1 {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 32px !important;
	font-weight: 400 !important;
	color: #000 !important;
	margin-bottom: 24px !important;
	line-height: 1.3 !important;
}

/* Section headings */
h2,
h3 {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	color: #000;
}

h2 {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 16px;
}

h3 {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 12px;
}

/* Portal widget headings */
h5 {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--lucent-text) !important;
	margin: 0 !important;
}

/* Page subtitle / description text */
.page-header-wrapper p,
.text-muted {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 14px;
	color: var(--lucent-text-muted);
}

/* ============================================
   Section 6: Widget Cards (/me page)
   ============================================ */

/* Widget row container */
.widget-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0;
}

/* Portal widget card */
.portal-widget {
	background-color: var(--lucent-card-bg);
	border: 1px solid var(--lucent-border);
	border-radius: 8px;
	padding: 20px 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: all 0.2s ease;
	min-height: auto;
	margin: 0;
	position: relative;
}

.portal-widget:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: #ddd;
}

/* Portal widget column link */
a.portal-widget-col {
	display: block;
	text-decoration: none !important;
	color: inherit !important;
	flex: 0 0 calc(50% - 8px);
	max-width: calc(50% - 8px);
	min-width: 200px;
}

a.portal-widget-col:hover {
	text-decoration: none !important;
}

/* Widget title positioning */
.portal-widget-col h5 {
	position: static !important;
	margin-left: 0 !important;
	display: block !important;
}

/* Indicator pill in widget (/me page only) - force perfect circles */
.widget-row .portal-widget .indicator-pill {
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	max-width: 10px !important;
	max-height: 10px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	margin-right: 12px;
	vertical-align: middle;
	flex-shrink: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

.widget-row .portal-widget .indicator-pill.green {
	background-color: var(--lucent-success) !important;
}

.widget-row .portal-widget .indicator-pill.red {
	background-color: #c45c4a !important;
}

.widget-row .portal-widget .indicator-pill.yellow,
.widget-row .portal-widget .indicator-pill.orange {
	background-color: #d4a853 !important;
}

.widget-row .portal-widget .indicator-pill.gray,
.widget-row .portal-widget .indicator-pill.grey {
	background-color: #999 !important;
}

/* Widget whitespace container */
.portal-widget .whitespace-nowrap {
	display: flex;
	align-items: center;
}

/* ============================================
   Section 7: Form Elements
   ============================================ */

/* Form container */
.web-form-container,
.frappe-control,
.form-group {
	margin-bottom: 20px;
}

/* Form labels */
label,
.control-label,
.form-label {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #000 !important;
	margin-bottom: 8px !important;
	display: block;
}

/* Required indicator */
.reqd::after,
.asterisk {
	color: #c45c4a !important;
}

/* Form inputs */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='tel'],
input[type='url'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
textarea,
select,
.form-control {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 14px !important;
	padding: 12px 16px !important;
	border: 1px solid var(--lucent-border) !important;
	border-radius: 6px !important;
	background-color: var(--lucent-input-bg) !important;
	color: var(--lucent-text) !important;
	height: auto !important;
	box-shadow: none !important;
	transition:
		border-color 0.2s,
		background-color 0.2s !important;
	width: 100%;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
	border-color: #999 !important;
	outline: none !important;
	box-shadow: none !important;
	background-color: #fff !important;
}

/* Select dropdown */
select.form-control {
	appearance: auto;
	-webkit-appearance: auto;
	cursor: pointer;
}

/* Textarea */
textarea.form-control {
	min-height: 100px;
	resize: vertical;
}

/* Checkbox and radio styling */
input[type='checkbox'],
input[type='radio'] {
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	margin-right: 8px;
	accent-color: var(--lucent-success);
	cursor: pointer;
}

/* Checkbox label container */
.checkbox label,
.radio label {
	display: flex !important;
	align-items: center !important;
	font-weight: 400 !important;
	cursor: pointer;
}

/* Read-only inputs */
input[readonly],
input[disabled],
.form-control[readonly],
.form-control[disabled] {
	background-color: #f5f5f5 !important;
	color: var(--lucent-text-muted) !important;
	cursor: not-allowed;
}

/* ============================================
   Section 8: List Views
   ============================================ */

/* List container */
.list-group,
.result {
	border: 1px solid var(--lucent-border);
	border-radius: 8px;
	background-color: var(--lucent-card-bg);
	overflow: hidden;
}

/* List items */
.list-group-item,
.result .list-row {
	padding: 16px 20px;
	border-bottom: 1px solid var(--lucent-border);
	background-color: transparent;
	transition: background-color 0.2s;
}

.list-group-item:last-child,
.result .list-row:last-child {
	border-bottom: none;
}

.list-group-item:hover,
.result .list-row:hover {
	background-color: var(--lucent-hover-bg);
}

/* Empty state styling */
.empty-state,
.no-result,
.nothing-to-show {
	text-align: center;
	padding: 48px 24px;
	color: var(--lucent-text-muted);
}

.empty-state svg,
.no-result svg,
.nothing-to-show svg,
.empty-state img,
.no-result img {
	width: 80px;
	height: 80px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.empty-state p,
.no-result p,
.nothing-to-show p {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 14px;
	color: var(--lucent-text-muted);
	margin: 0;
}

/* ============================================
   Section 9: Buttons
   ============================================ */

/* Primary button */
.btn-primary,
.btn-primary-dark,
button[type='submit'],
input[type='submit'] {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 12px 24px !important;
	background-color: var(--lucent-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: background-color 0.2s !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.btn-primary:hover,
.btn-primary-dark:hover,
button[type='submit']:hover,
input[type='submit']:hover {
	background-color: #333 !important;
	color: #fff !important;
}

.btn-primary:focus,
.btn-primary:active {
	background-color: #333 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Secondary/default button */
.btn-default,
.btn-secondary,
.btn-light {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 12px 24px !important;
	background-color: transparent !important;
	color: var(--lucent-text) !important;
	border: 1px solid var(--lucent-border) !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
	background-color: var(--lucent-hover-bg) !important;
	border-color: #ddd !important;
}

/* Link button */
.btn-link {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 14px !important;
	color: var(--lucent-text-light) !important;
	text-decoration: underline !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.btn-link:hover {
	color: var(--lucent-text) !important;
}

/* Small buttons */
.btn-sm {
	padding: 8px 16px !important;
	font-size: 13px !important;
}

/* Button group spacing */
.btn-group,
.form-actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

/* ============================================
   Section 10: Footer & Branding Overrides
   ============================================ */

/* Hide Frappe footer and branding */
.web-footer,
.website-footer,
footer.web-footer,
.footer-info,
.footer-subscribe,
.footer-powered,
.footer-logo-extension,
.powered-by {
	display: none !important;
}

/* ============================================
   Section 10b: Breadcrumbs for Web Forms
   ============================================ */

/* Style breadcrumbs on web form pages to match Lucent design */
.page-breadcrumbs {
	background-color: transparent !important;
	padding: 16px 0 !important;
	margin-bottom: 0 !important;
}

.page-breadcrumbs .breadcrumb-container {
	background-color: transparent !important;
	padding: 0 !important;
}

.page-breadcrumbs .breadcrumb {
	background-color: transparent !important;
	padding: 0 !important;
	margin-bottom: 0 !important;
	font-size: 14px !important;
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
}

.page-breadcrumbs .breadcrumb-item {
	color: var(--lucent-text-muted) !important;
}

.page-breadcrumbs .breadcrumb-item a {
	color: var(--lucent-text-light) !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
}

.page-breadcrumbs .breadcrumb-item a:hover {
	color: var(--lucent-text) !important;
}

.page-breadcrumbs .breadcrumb-item.active {
	color: var(--lucent-text) !important;
}

.page-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
	color: var(--lucent-text-muted) !important;
	content: '›' !important;
	padding: 0 8px !important;
}

/* Hide breadcrumbs on custom portal pages (they have their own navigation) */
.portal-container .page-breadcrumbs,
.portal-main .page-breadcrumbs {
	display: none !important;
}

/* ============================================
   Section 11: Alerts & Messages
   ============================================ */

.alert {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 14px;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 20px;
}

.alert-danger,
.alert-error {
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.alert-success {
	background-color: var(--lucent-success-bg);
	border: 1px solid #c6f6d5;
	color: var(--lucent-success);
}

.alert-warning {
	background-color: #fffbeb;
	border: 1px solid #fef3c7;
	color: #d97706;
}

.alert-info {
	background-color: #eff6ff;
	border: 1px solid #dbeafe;
	color: #2563eb;
}

/* ============================================
   Section 12: Cards & Panels
   ============================================ */

.card,
.panel,
.web-form-container > div {
	background-color: var(--lucent-card-bg);
	border: 1px solid var(--lucent-border);
	border-radius: 8px;
	box-shadow: none;
}

.card-header,
.panel-heading {
	background-color: transparent;
	border-bottom: 1px solid var(--lucent-border);
	padding: 16px 24px;
}

.card-body,
.panel-body {
	padding: 24px;
}

/* ============================================
   Section 13: Tables
   ============================================ */

table {
	width: 100%;
	border-collapse: collapse;
}

table th {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--lucent-text-muted);
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--lucent-border);
	background-color: #fdfcfa;
}

table td {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 14px;
	color: var(--lucent-text);
	padding: 14px 16px;
	border-bottom: 1px solid var(--lucent-border);
}

table tr:last-child td {
	border-bottom: none;
}

table tr:hover td {
	background-color: var(--lucent-hover-bg);
}

/* ============================================
   Section 14: Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
	.sidebar-column {
		display: none;
	}

	.main-column {
		padding: 16px;
	}

	a.portal-widget-col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	h1,
	.page-header h1,
	.main-column h1 {
		font-size: 24px !important;
	}
}

/* ============================================
   Section 15: Link Styling
   ============================================ */

a {
	color: var(--lucent-text);
	text-decoration: none;
	transition: color 0.2s;
}

a:hover {
	color: var(--lucent-primary);
	text-decoration: none;
}

/* Explicit link styling where underline is desired */
.text-link,
p a,
.content a {
	color: var(--lucent-text-light);
	text-decoration: underline;
}

.text-link:hover,
p a:hover,
.content a:hover {
	color: var(--lucent-text);
}

/* ============================================
   Section 16: Utility Classes
   ============================================ */

/* Hide elements */
.hidden,
[hidden] {
	display: none !important;
}

/* Text utilities */
.text-muted {
	color: var(--lucent-text-muted) !important;
}

.text-center {
	text-align: center;
}

/* Spacing utilities */
.mt-4 {
	margin-top: 1rem;
}

.mb-4 {
	margin-bottom: 1rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ============================================
   Section 17: Login Page Icon Handling
   ============================================ */

/* Hide field icons (web components with shadow DOM that can't be styled) */
#page-login .field-icon,
.page-card .field-icon,
#page-login svg-icon,
.page-card svg-icon,
#page-login .email-field svg,
#page-login .password-field svg,
.page-card .email-field svg,
.page-card .password-field svg {
	display: none !important;
}

/* Reset field container styles without icons */
#page-login .email-field,
#page-login .password-field,
.page-card .email-field,
.page-card .password-field {
	display: block !important;
	position: relative !important;
}

/* Ensure input takes full width */
#page-login .email-field .form-control,
#page-login .password-field .form-control,
.page-card .email-field .form-control,
.page-card .password-field .form-control {
	width: 100% !important;
	border-radius: 6px !important;
}

/* Style show password button */
#page-login .toggle-password,
.page-card .toggle-password {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	font-size: 12px !important;
	color: #666 !important;
	cursor: pointer !important;
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

/* ============================================
   Portal SVG Icon Size Overrides
   ============================================ */

/* Ensure SVG icons with Tailwind size classes maintain their size */
.portal-main svg.w-4,
.portal-main .w-4 svg {
	width: 1rem !important;
	min-width: 1rem !important;
	max-width: 1rem !important;
}

.portal-main svg.h-4,
.portal-main .h-4 svg {
	height: 1rem !important;
	min-height: 1rem !important;
	max-height: 1rem !important;
}

.portal-main svg.w-5,
.portal-main .w-5 svg {
	width: 1.25rem !important;
	min-width: 1.25rem !important;
	max-width: 1.25rem !important;
}

.portal-main svg.h-5,
.portal-main .h-5 svg {
	height: 1.25rem !important;
	min-height: 1.25rem !important;
	max-height: 1.25rem !important;
}

.portal-main svg.w-6,
.portal-main .w-6 svg {
	width: 1.5rem !important;
	min-width: 1.5rem !important;
	max-width: 1.5rem !important;
}

.portal-main svg.h-6,
.portal-main .h-6 svg {
	height: 1.5rem !important;
	min-height: 1.5rem !important;
	max-height: 1.5rem !important;
}

.portal-main svg.w-8,
.portal-main .w-8 svg {
	width: 2rem !important;
	min-width: 2rem !important;
	max-width: 2rem !important;
}

.portal-main svg.h-8,
.portal-main .h-8 svg {
	height: 2rem !important;
	min-height: 2rem !important;
	max-height: 2rem !important;
}