/* 頁面標題 */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
    gap: 16px;
}

.page-subtitle {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.1rem;
	margin-top: -0.5rem;
	margin-bottom: 0.5rem;
}

.header-content h1 {
	font-size: 1.8rem;
	color: var(--sys-text);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
    width: max-content;
}

.header-content h1 i {
	color: var(--accent);
    filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.5));
}

.header-content p {
	color: var(--sys-text-muted);
	font-size: 0.95rem;
}

.header-content small {
	color: var(--sys-text-secondary);
	font-size: 0.6em;
    font-weight: normal;
    margin-left: 0.5rem;
}

.header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* 支援標頭按鈕兩列版面樣式 */
.header-actions.two-rows {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.header-actions .action-row-first,
.header-actions .action-row-second {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
    justify-content: flex-end;
}




@media (max-width: 768px) {

	.header-content h1 {
		font-size: 1.5rem;
		width: auto; /* 取消 max-content，避免溢出 */
	}

	/* 頁面標題區改直排，讓操作按鈕移到標題下方 */
	.page-header {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	/* header-actions 靠左對齊（或改 stretch 讓按鈕撐滿） */
	.header-actions {
		justify-content: flex-start;
	}

	/* two-rows 模式：兩列按鈕各自可換行，靠左排列 */
	.header-actions.two-rows {
		align-items: flex-start;
		gap: 8px;
	}

	.header-actions .action-row-first,
	.header-actions .action-row-second {
		width: 100%;
		gap: 8px;
	}
}

@media (max-width: 480px) {
	.page-header {
		flex-direction: column;
		align-items: stretch;
	}

	.header-content {
		width: 100%;
	}

	/* 按鈕列強制換行，按鈕自動伸縮填滿 */
	.header-actions .action-row-first,
	.header-actions .action-row-second {
		flex-wrap: wrap;
	}

	.header-actions .action-row-first .btn,
	.header-actions .action-row-second .btn {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 100px;
	}

	.header-actions {
		align-items: stretch;
		justify-content: center;
	}
}

/* ===============================
        Content Grid
   =============================== */

.content-grid {
    display: grid;
	grid-template-columns: 2fr 1fr;
    gap: 30px;
}



/* ===============================
        System card layout
   =============================== */

.sys-card {
	background: rgba(30, 41, 59, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
    height: auto;
    animation: fadeIn 0.3s ease;
}

/* 透明無框卡片 */
.sys-card.sys-card-transparent {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.sys-card.sys-card-transparent .sys-card-header {
	background: transparent !important;
	border: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.sys-card.sys-card-transparent .sys-card-body {
	padding: 0 !important;
	border-top: none !important;
}

.sys-card-header {
	padding: 20px 25px;
	display: flex;
	align-items: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	gap: 10px;
}

.sys-card-header i {
    color: var(--accent);
}

.note-count-badge,
.count-badge {
    margin-left: auto;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 12px;
    border-radius: 20px;
}

.sys-card-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.2s;
    margin-left: auto;
}

/* 卡片主體 */
.sys-card-body {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sys-card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}


/* ===============================
        Welcome Banner
   =============================== */

.welcome {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 25px;
}

.welcome-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--orange-light), var(--orange));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    flex-shrink: 0;
}

.welcome-text {
    flex: 1;
}

.welcome-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--sys-text);
}

.greeting {
    background: linear-gradient(90deg, #fff, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-subtitle {
    color: var(--sys-text-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.welcome-subtitle i {
    font-size: 0.9rem;
}

.welcome-divider {
    color: var(--sys-border);
    margin: 0 4px;
}


/* ===============================
        Stats Grid
   =============================== */

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stat-card {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 217, 255, 0.3);
    background: rgba(30, 41, 59, 0.6);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.stat-icon.blue {background: var(--blue-bg); color: var(--blue-light);}
.stat-icon.green {background: var(--green-bg); color: var(--green-light);}
.stat-icon.purple {background: var(--purple-bg); color: var(--purple-light);}
.stat-icon.cyan {background: var(--cyan-bg); color: var(--cyan-light);}
.stat-icon.red {background: var(--red-bg); color: var(--red-light);}
.stat-icon.orange {background: var(--orange-bg); color: var(--orange-light);}
.stat-icon.yellow {background: var(--yellow-bg); color: var(--yellow-light);}

.stat-info {
    flex: 1;
}

.stat-info h3 {
    font-size: 0.85rem;
    color: var(--sys-text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-value .value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sys-text);
}

.stat-value .value.status-text {
    font-size: 1.1rem;
    color: var(--green-light);
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* 正向 */
.stat-trend.positive {
    background: rgba(52, 211, 153, 0.1);
    color: var(--green-light);
}

/* 負向 */
.stat-trend.negative {
    background: var(--red-bg);
    color: var(--red-light);
}

.stat-trend i {
    font-size: 0.7rem;
}

@media (max-width: 1600px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}



/* ===============================
        System Activity layout
   =============================== */

.activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    transition: all 0.2s;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.activity-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-indicator.cyan { background: var(--accent); box-shadow: 0 0 8px rgba(0, 217, 255, 0.5); }
.activity-indicator.green { background: var(--green-light); box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
.activity-indicator.blue { background: var(--blue-light); box-shadow: 0 0 8px rgba(96, 165, 250, 0.5); }
.activity-indicator.purple { background: var(--purple-light); box-shadow: 0 0 8px rgba(167, 139, 250, 0.5); }
.activity-indicator.red { background: var(--red-light); box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.activity-indicator.orange { background: var(--orange-light); box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.activity-indicator.yellow { background: var(--yellow-light); box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }

.activity-content {
    flex: 1;
}

.activity-title {
    color: var(--sys-text);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.activity-time {
    color: var(--sys-text-muted);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.activity-time i {
    font-size: 0.75rem;
}

.activity-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.activity-badge.success {background: var(--green-bg);color: var(--green-light);}
.activity-badge.info {background: var(--blue-bg);color: var(--blue-light);}
.activity-badge.warning {background: var(--orange-bg);color: var(--orange-light);}
.activity-badge.danger {background: var(--red-bg);color: var(--red-light);}


/* ===============================
        Quick Actions
   =============================== */


.action-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--sys-border);
    border-radius: 14px;
    color: var(--sys-text);
    text-decoration: none;
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(0, 217, 255, 0.05);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 217, 255, 0.1);
}

.action-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.action-icon.blue { background: var(--blue-bg); color: var(--blue-light); }
.action-icon.green { background: var(--green-bg); color: var(--green-light); }
.action-icon.purple { background: var(--purple-bg); color: var(--purple-light); }
.action-icon.cyan { background: var(--cyan-bg); color: var(--cyan-light); }
.action-icon.red { background: var(--red-bg); color: var(--red-light); }
.action-icon.orange { background: var(--orange-bg); color: var(--orange-light); }
.action-icon.yellow { background: var(--yellow-bg); color: var(--yellow-light); }

.action-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.action-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sys-text);
}

.action-desc {
    font-size: 0.8rem;
    color: var(--sys-text-muted);
}


/* ===============================
        ＲＷＤ
   =============================== */

/* 平板 (992px 以下) */
@media (max-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .welcome-title {
        font-size: 1.8rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手機 (768px 以下) */
@media (max-width: 768px) {
    .welcome {
        gap: 15px;
    }
    
    .welcome-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .welcome-title {
        font-size: 1.5rem;
    }
    
    .welcome-subtitle {
        font-size: 0.8rem;
        gap: 4px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-card {
        gap: 12px;
    }
    
    .sys-card-body {
        padding: 20px;
    }
}

/* 小手機 (480px 以下) */
@media (max-width: 480px) {
    
    .welcome-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .welcome-title {
        font-size: 1.3rem;
    }
    
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .stat-value .value {
        font-size: 1.4rem;
    }
    
    .action-btn {
        padding: 15px;
        gap: 12px;
    }
    
    .action-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .action-title {
        font-size: 0.9rem;
    }
    
    .action-desc {
        font-size: 0.75rem;
    }
    
    .sys-card-header {
        padding: 15px 20px;
    }
    
    .sys-card-body {
        padding: 15px;
    }
    
    .activity-item {
        gap: 10px;
        padding: 10px;
    }
    
    .activity-title {
        font-size: 0.9rem;
    }
    
    .activity-time {
        font-size: 0.75rem;
    }
}




/* ===============================
        Global Empty State
   =============================== */

.empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: var(--sys-text-muted);
	animation: fadeIn 0.8s ease-out;
}

.empty-state i {
	font-size: 4rem;
	color: rgba(255, 255, 255, 0.1);
	margin-bottom: 20px;
}

.empty-state h3 {
	font-size: 1.3rem;
	color: var(--sys-text);
	margin-bottom: 8px;
}

.empty-state p {
	font-size: 0.95rem;
}