/* ============================================================
   portal.css — Joyzone 协同门户全局共享样式
   通过 hooks.py web_include_css 注入，替代分散在模板和 Python
   中的重复 CSS 字符串，保持唯一真相源。
   ============================================================ */

/* ----------------------------------------------------------
   侧边栏：高品质 SaaS 激活态样式
   覆盖 .web-sidebar / .sidebar-items 下的 list-group-item
   ---------------------------------------------------------- */
.web-sidebar .list-group-item,
.sidebar-items .list-group-item,
.web-sidebar .sidebar-item a,
.sidebar-items .sidebar-item a {
	display: block !important;
	border: none !important;
	border-radius: 6px !important;
	margin-bottom: 2px !important;
	padding: 0.5rem 0.75rem !important;
	font-size: 0.82rem !important;
	color: #475569 !important;
	transition: all 0.15s ease !important;
	background: transparent !important;
	text-decoration: none !important;
	margin-left: 0.5rem !important;
}
.web-sidebar .list-group-item:hover,
.sidebar-items .list-group-item:hover,
.web-sidebar .sidebar-item a:hover,
.sidebar-items .sidebar-item a:hover {
	background-color: #f1f5f9 !important;
	color: #0f172a !important;
	text-decoration: none !important;
}
.web-sidebar .list-group-item.active,
.sidebar-items .list-group-item.active,
.web-sidebar .sidebar-item a.active,
.sidebar-items .sidebar-item a.active {
	background-color: #f1f5f9 !important;
	color: #0f172a !important;
	font-weight: 700 !important;
	position: relative !important;
	text-decoration: none !important;
}
.web-sidebar .list-group-item.active::before,
.sidebar-items .list-group-item.active::before,
.web-sidebar .sidebar-item a.active::before,
.sidebar-items .sidebar-item a.active::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 25% !important;
	height: 50% !important;
	width: 3px !important;
	background-color: #0f172a !important;
	border-radius: 0 4px 4px 0 !important;
}

.web-sidebar h6,
.sidebar-items h6 {
	font-size: 0.88rem !important;
	font-weight: 800 !important;
	color: #1e293b !important;
	text-transform: none !important;
	letter-spacing: 0.3px !important;
	margin: 1.5rem 0 0.65rem 0.5rem !important;
}
.web-sidebar ul,
.sidebar-items ul {
	padding-left: 0 !important;
	margin-bottom: 0 !important;
	list-style: none !important;
}

/* ----------------------------------------------------------
   状态徽章（indicator-pill）：用于列表行和详情页表头
   ---------------------------------------------------------- */
.indicator-pill-custom {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.indicator-pill-custom.green {
	background-color: #ecfdf5;
	color: #059669;
	border: 1px solid #d1fae5;
}
.indicator-pill-custom.blue {
	background-color: #eff6ff;
	color: #2563eb;
	border: 1px solid #dbeafe;
}
.indicator-pill-custom.orange {
	background-color: #fff7ed;
	color: #ea580c;
	border: 1px solid #ffedd5;
}
.indicator-pill-custom.red {
	background-color: #fef2f2;
	color: #dc2626;
	border: 1px solid #fee2e2;
}
.indicator-pill-custom.darkgrey,
.indicator-pill-custom.grey {
	background-color: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
}

/* 呼吸灯动效：orange/blue/red 状态 */
.indicator-dot {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentColor;
	margin-right: 5px;
}
.indicator-pill-custom.orange .indicator-dot,
.indicator-pill-custom.blue .indicator-dot,
.indicator-pill-custom.red .indicator-dot {
	animation: indicator-pulse 2s infinite ease-in-out;
}
@keyframes indicator-pulse {
	0%   { opacity: 0.45; transform: scale(0.9); }
	50%  { opacity: 1;    transform: scale(1.15); }
	100% { opacity: 0.45; transform: scale(0.9); }
}

/* ----------------------------------------------------------
   订单与交易明细页（Quotation/Sales Order/Purchase Order等）卡片化包裹
   完美对齐 Web Form 样式，消除点击详情时大片背景色闪烁突变，实现极奢 SaaS 质感
   ---------------------------------------------------------- */
.page_content:has(.order-container),
.page_content:has(.transaction-subheading) {
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* ----------------------------------------------------------
   桌面端侧边栏右侧浅分隔线与纵向舒展
   ---------------------------------------------------------- */
@media (min-width: 768px) {
	.web-sidebar {
		border-right: 1px solid #e2e8f0 !important;
		padding-right: 1.75rem !important;
		min-height: calc(100vh - 120px) !important;
	}
}