/* ERP Solution Commercial Web & Login Design System */
:root {
	--erp-primary: #2563eb;
	--erp-primary-dark: #1d4ed8;
	--erp-accent: #0ea5e9;
	--erp-surface: #ffffff;
	--erp-bg: #f8fafc;
	--erp-text: #0f172a;
	--erp-muted: #64748b;
	--erp-border: #e2e8f0;
}

body[data-path="login"] {
	background: radial-gradient(circle at 50% 10%, #e0e7ff 0%, #f8fafc 60%, #f1f5f9 100%) !important;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--erp-text);
}

body[data-path="login"] .navbar {
	background: transparent !important;
	border-bottom: none !important;
}

body[data-path="login"] .for-login {
	max-width: 440px;
	margin: 60px auto 40px;
	padding: 0 16px;
}

body[data-path="login"] .page-card-head {
	text-align: center;
	margin-bottom: 24px;
}

body[data-path="login"] .page-card-head .app-logo {
	max-height: 48px;
	margin: 0 auto 16px;
	display: block;
	filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.12));
}

body[data-path="login"] .page-card-head h4 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--erp-text);
	margin-bottom: 6px;
}

body[data-path="login"] .page-card-head::after {
	content: "Business Management Platform";
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--erp-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body[data-path="login"] .page-card {
	background: var(--erp-surface);
	border: 1px solid var(--erp-border);
	border-radius: 16px;
	box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
	padding: 32px 28px;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-path="login"] .form-group {
	margin-bottom: 20px;
}

body[data-path="login"] .form-control {
	height: 44px;
	border-radius: 8px;
	border: 1.5px solid var(--erp-border);
	padding: 10px 14px 10px 38px;
	font-size: 14px;
	color: var(--erp-text);
	background-color: #ffffff;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

body[data-path="login"] .form-control:focus {
	border-color: var(--erp-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

body[data-path="login"] .field-icon {
	position: absolute;
	left: 12px;
	top: 14px;
	color: var(--erp-muted);
}

body[data-path="login"] .toggle-password {
	position: absolute;
	right: 12px;
	top: 13px;
	font-size: 12px;
	font-weight: 600;
	color: var(--erp-primary);
	cursor: pointer;
}

body[data-path="login"] .forgot-password-message {
	text-align: right;
	margin-top: -6px;
	margin-bottom: 22px;
}

body[data-path="login"] .forgot-password-message a {
	font-size: 13px;
	font-weight: 500;
	color: var(--erp-primary);
	text-decoration: none;
}

body[data-path="login"] .forgot-password-message a:hover {
	color: var(--erp-primary-dark);
	text-decoration: underline;
}

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
	height: 44px;
	border-radius: 8px;
	background: var(--erp-primary);
	border: 1px solid var(--erp-primary);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
	transition: background-color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover {
	background: var(--erp-primary-dark);
	border-color: var(--erp-primary-dark);
	box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}

body[data-path="login"] .btn-login:active,
body[data-path="login"] .btn-primary:active {
	transform: scale(0.99);
}

body[data-path="login"] .page-footer {
	text-align: center;
	padding: 24px;
	font-size: 12px;
	color: var(--erp-muted);
}

/* ==========================================================================
   CLIENT & VENDOR SELF-SERVICE WEB PORTAL (/portal, /me, /orders, /invoices)
   ========================================================================== */

/* Web Layout & Modern Typography */
body.web-page,
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	color: var(--erp-text);
	background-color: var(--erp-bg);
	-webkit-font-smoothing: antialiased;
}

/* Modern Web Navbar */
.web-page .navbar,
.navbar-light {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--erp-border) !important;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
	padding: 10px 24px !important;
}

.web-page .navbar .navbar-brand {
	font-weight: 700;
	font-size: 17px;
	color: var(--erp-text) !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

.web-page .navbar .nav-link {
	font-weight: 500;
	font-size: 13.5px;
	color: var(--erp-muted) !important;
	padding: 6px 14px !important;
	border-radius: 6px;
	transition: all 0.15s ease;
}

.web-page .navbar .nav-link:hover,
.web-page .navbar .nav-item.active .nav-link {
	color: var(--erp-primary) !important;
	background-color: rgba(37, 99, 235, 0.06);
}

/* Portal Main Container */
.portal-container,
.page-container,
.container.my-5 {
	max-width: 1200px;
	margin-top: 24px !important;
	margin-bottom: 48px !important;
}

/* Web Sidebar (Customer/Vendor Navigation) */
.web-sidebar {
	background: var(--erp-surface);
	border: 1px solid var(--erp-border);
	border-radius: 12px;
	padding: 18px 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	margin-bottom: 24px;
}

.web-sidebar .title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--erp-muted);
	padding: 0 10px 10px 10px;
	border-bottom: 1px solid var(--erp-border);
	margin-bottom: 8px;
	list-style: none;
}

.web-sidebar .sidebar-item a {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--erp-text);
	text-decoration: none;
	transition: all 0.15s ease;
}

.web-sidebar .sidebar-item a:hover {
	background: var(--erp-bg);
	color: var(--erp-primary);
	transform: translateX(2px);
}

.web-sidebar .sidebar-item a.active {
	background: rgba(37, 99, 235, 0.08);
	color: var(--erp-primary);
	font-weight: 600;
}

/* Breadcrumbs */
.breadcrumb {
	background: transparent !important;
	padding: 0 0 14px 0 !important;
	margin-bottom: 14px !important;
	font-size: 13px;
}

.breadcrumb-item a {
	color: var(--erp-muted);
	text-decoration: none;
}

.breadcrumb-item a:hover {
	color: var(--erp-primary);
}

.breadcrumb-item.active {
	color: var(--erp-text);
	font-weight: 600;
}

/* Portal Transaction Cards & Order Pages */
.order-container,
.portal-card,
.web-form-container {
	background: var(--erp-surface);
	border: 1px solid var(--erp-border);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
	margin-bottom: 24px;
}

/* Indicator Status Badges */
.indicator-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize;
}

.indicator-pill.green,
.indicator-pill.paid,
.indicator-pill.completed {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
}

.indicator-pill.blue,
.indicator-pill.submitted,
.indicator-pill.open {
	background: #eff6ff;
	color: #2563eb;
	border: 1px solid #bfdbfe;
}

.indicator-pill.orange,
.indicator-pill.yellow,
.indicator-pill.pending {
	background: #fffbeb;
	color: #d97706;
	border: 1px solid #fde68a;
}

.indicator-pill.red,
.indicator-pill.overdue,
.indicator-pill.cancelled {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.indicator-pill.darkgrey,
.indicator-pill.gray,
.indicator-pill.draft {
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #cbd5e1;
}

/* Order Item Table & Rows */
.order-items {
	padding: 10px 0;
	border-bottom: 1px solid var(--erp-border);
	font-size: 13.5px;
}

.order-items.order-item-header {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--erp-muted);
	border-bottom: 2px solid var(--erp-border);
	padding-bottom: 8px;
}

.order-item-name {
	font-weight: 600;
	color: var(--erp-text);
}

/* Web Portal Lists (/orders, /invoices, etc.) */
.web-list-item,
.result .list-row,
.web-list .list-row {
	background: var(--erp-surface);
	border: 1px solid var(--erp-border);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 10px;
	transition: all 0.15s ease;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.web-list-item:hover,
.result .list-row:hover,
.web-list .list-row:hover {
	transform: translateY(-1px);
	border-color: var(--erp-primary);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

/* Action Buttons */
.web-page .btn-primary {
	background: var(--erp-primary);
	border: 1px solid var(--erp-primary);
	color: #ffffff;
	border-radius: 8px;
	font-weight: 600;
	font-size: 13.5px;
	padding: 7px 16px;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
	transition: all 0.15s ease;
}

.web-page .btn-primary:hover {
	background: var(--erp-primary-dark);
	border-color: var(--erp-primary-dark);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
	transform: translateY(-1px);
}

.web-page .btn-secondary,
.web-page .btn-default {
	background: #ffffff;
	border: 1px solid var(--erp-border);
	color: var(--erp-text);
	border-radius: 8px;
	font-weight: 500;
	font-size: 13.5px;
	padding: 7px 16px;
	transition: all 0.15s ease;
}

.web-page .btn-secondary:hover,
.web-page .btn-default:hover {
	background: var(--erp-bg);
	border-color: var(--erp-muted);
}

/* Web Footer */
.web-footer {
	border-top: 1px solid var(--erp-border);
	background: var(--erp-surface);
	padding: 24px 0;
	margin-top: 48px;
	text-align: center;
	font-size: 12.5px;
	color: var(--erp-muted);
}