@charset "utf-8";
/* =========================================================================
   dashboard.css  —  ダッシュボード（トップページ）
   ========================================================================= */

.dashboard {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--s-4);
}

/* --- ヒーローエリア（挨拶 + 日付） --- */
.dash-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
	padding: var(--s-5) var(--s-5);
	background: linear-gradient(135deg, var(--c-primary) 0%, #0A3641 100%);
	border-radius: var(--r-xl);
	color: var(--c-text-on-dark);
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}
.dash-hero::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(184,134,47,0.18) 0%, transparent 65%);
	pointer-events: none;
}
.dash-hero .greet {
	flex: 1;
	min-width: 240px;
	z-index: 1;
}
.dash-hero .greet h2 {
	font-size: 2.2rem;
	font-weight: 700;
	color: rgba(255,255,255,1);
	margin: 0 0 6px 0;
	letter-spacing: 0.02em;
}
.dash-hero .greet p {
	font-size: 1.3rem;
	color: rgba(255,255,255,0.75);
	margin: 0;
}
.dash-hero .greet .name {
	color: var(--c-accent-hover);
	font-weight: 700;
}
.dash-hero .date {
	z-index: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.dash-hero .date .day {
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--c-accent-hover);
	font-family: var(--ff-num);
}
.dash-hero .date .ymd {
	font-size: 1.2rem;
	color: rgba(255,255,255,0.75);
	margin-top: 4px;
}

@media screen and (max-width:600px){
	.dash-hero { padding: var(--s-4); justify-content: center; }
	.dash-hero .greet h2 { font-size: 1.8rem; }
	.dash-hero .date .day { font-size: 2.8rem; }
}

/* --- KPIサマリーカード --- */
.dash-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}
@media screen and (max-width:900px){
	.dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width:480px){
	.dash-kpi-grid { grid-template-columns: 1fr; }
}

.kpi-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: var(--s-4);
	box-shadow: var(--shadow-xs);
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	position: relative;
	overflow: hidden;
	display: block;
	color: inherit;
	text-decoration: none;
}
.kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-primary-soft);
	color: inherit;
	text-decoration: none;
}
.kpi-card .kpi-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	margin-bottom: var(--s-3);
}
.kpi-card .kpi-label {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--c-text-soft);
	letter-spacing: 0.05em;
}
.kpi-card .kpi-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kpi-card .kpi-icon svg { width: 20px; height: 20px; }
.kpi-card .kpi-value {
	font-size: 3.0rem;
	font-weight: 800;
	color: var(--c-text);
	line-height: 1.1;
	font-family: var(--ff-num);
	font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-unit {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--c-text-mute);
	margin-left: 4px;
}
.kpi-card .kpi-sub {
	margin-top: 4px;
	font-size: 1.1rem;
	color: var(--c-text-mute);
}

/* KPIテーマカラー */
.kpi-card.t-primary .kpi-icon { background: var(--c-primary-pale); color: var(--c-primary); }
.kpi-card.t-primary .kpi-icon svg { fill: var(--c-primary); }
.kpi-card.t-primary { border-top: 3px solid var(--c-primary); }

.kpi-card.t-success .kpi-icon { background: var(--c-success-pale); color: var(--c-success); }
.kpi-card.t-success .kpi-icon svg { fill: var(--c-success); }
.kpi-card.t-success { border-top: 3px solid var(--c-success); }

.kpi-card.t-accent .kpi-icon { background: var(--c-accent-pale); color: var(--c-accent); }
.kpi-card.t-accent .kpi-icon svg { fill: var(--c-accent); }
.kpi-card.t-accent { border-top: 3px solid var(--c-accent); }

.kpi-card.t-warning .kpi-icon { background: var(--c-warning-pale); color: var(--c-warning); }
.kpi-card.t-warning .kpi-icon svg { fill: var(--c-warning); }
.kpi-card.t-warning { border-top: 3px solid var(--c-warning); }

.kpi-card.t-info .kpi-icon { background: var(--c-info-pale); color: var(--c-info); }
.kpi-card.t-info .kpi-icon svg { fill: var(--c-info); }
.kpi-card.t-info { border-top: 3px solid var(--c-info); }


/* --- メインエリア（2カラム） --- */
.dash-main {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
}
@media screen and (max-width:900px){
	.dash-main { grid-template-columns: 1fr; }
}

.dash-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: var(--s-4) var(--s-5);
	box-shadow: var(--shadow-xs);
}
.dash-card .dash-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-border);
	gap: var(--s-3);
	flex-wrap: wrap;
}
.dash-card .dash-card-title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-text);
}
.dash-card .dash-card-title::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 18px;
	background: var(--c-primary);
	border-radius: 2px;
}
.dash-card .dash-card-action {
	font-size: 1.2rem;
	color: var(--c-primary);
	text-decoration: none;
	font-weight: 600;
}
.dash-card .dash-card-action:hover {
	text-decoration: underline;
}

@media screen and (max-width:600px){
	.dash-card { padding: var(--s-4) var(--s-3); }
}

/* --- 最近のアクティビティ --- */
.activity-list { display: flex; flex-direction: column; gap: 0; }
.activity-item {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) 0;
	border-bottom: 1px dashed var(--c-border);
}
.activity-item:last-child { border-bottom: none; }
.activity-item .a-time {
	font-family: var(--ff-num);
	font-variant-numeric: tabular-nums;
	font-size: 1.2rem;
	color: var(--c-text-mute);
	min-width: 80px;
	flex-shrink: 0;
	padding-top: 2px;
}
.activity-item .a-time strong { color: var(--c-text); display: block; font-size: 1.3rem;}
.activity-item .a-body {
	flex: 1;
	min-width: 0;
}
.activity-item .a-tag {
	display: inline-block;
	font-size: 1.0rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: var(--r-sm);
	margin-right: 6px;
	vertical-align: 1px;
}
.activity-item .a-tag.t1 { background: var(--c-info-pale); color: var(--c-info); } /* 入庫 */
.activity-item .a-tag.t2 { background: var(--c-warning-pale); color: var(--c-warning); } /* 仕掛 */
.activity-item .a-tag.t3 { background: var(--c-success-pale); color: var(--c-success); } /* 完成 */
.activity-item .a-tag.t4 { background: var(--c-accent-pale); color: var(--c-accent); } /* 出庫 */
.activity-item .a-name {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--c-text);
}
.activity-item .a-meta {
	margin-top: 2px;
	font-size: 1.1rem;
	color: var(--c-text-mute);
}
.activity-item .a-meta .lot {
	background: var(--c-surface-alt);
	padding: 1px 6px;
	border-radius: var(--r-sm);
	font-family: var(--ff-num);
	font-size: 1.0rem;
	margin-right: 4px;
}

.empty-state {
	text-align: center;
	padding: var(--s-6) var(--s-4);
	color: var(--c-text-faint);
	font-size: 1.3rem;
}
.empty-state::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--s-3);
	background-color: var(--c-text-faint);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 2c4.4 0 8 3.6 8 8 0 1.7-.5 3.3-1.4 4.6L7.4 5.4C8.7 4.5 10.3 4 12 4zM4 12c0-1.7.5-3.3 1.4-4.6l11.2 11.2C15.3 19.5 13.7 20 12 20c-4.4 0-8-3.6-8-8z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 2c4.4 0 8 3.6 8 8 0 1.7-.5 3.3-1.4 4.6L7.4 5.4C8.7 4.5 10.3 4 12 4zM4 12c0-1.7.5-3.3 1.4-4.6l11.2 11.2C15.3 19.5 13.7 20 12 20c-4.4 0-8-3.6-8-8z'/></svg>") center/contain no-repeat;
	opacity: 0.4;
}

/* --- アラートリスト（消費期限間近） --- */
.alert-list { display: flex; flex-direction: column; gap: var(--s-2); }
.alert-item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	background: var(--c-warning-pale);
	border: 1px solid rgba(201,126,61,0.3);
	border-radius: var(--r-md);
	transition: all var(--t-fast) var(--ease);
}
.alert-item:hover {
	border-color: var(--c-warning);
	box-shadow: var(--shadow-xs);
}
.alert-item.urgent {
	background: var(--c-danger-pale);
	border-color: rgba(168,58,72,0.3);
}
.alert-item.urgent:hover { border-color: var(--c-danger); }
.alert-item .a-days {
	width: 56px;
	flex-shrink: 0;
	text-align: center;
	font-family: var(--ff-num);
}
.alert-item .a-days strong {
	display: block;
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--c-warning);
	line-height: 1;
}
.alert-item.urgent .a-days strong { color: var(--c-danger); }
.alert-item .a-days span {
	font-size: 1.0rem;
	color: var(--c-text-mute);
}
.alert-item .a-info {
	flex: 1;
	min-width: 0;
}
.alert-item .a-info .name {
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.alert-item .a-info .meta {
	margin-top: 2px;
	font-size: 1.1rem;
	color: var(--c-text-mute);
}

/* --- 在庫サマリー --- */
.stock-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3);
}
@media screen and (max-width:600px){
	.stock-summary { grid-template-columns: 1fr; gap: var(--s-2); }
}
.stock-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-3) var(--s-4);
	background: var(--c-surface-alt);
	border-radius: var(--r-md);
	border: 1px solid var(--c-border);
	text-decoration: none;
	color: inherit;
	transition: all var(--t-fast) var(--ease);
}
.stock-pill:hover {
	background: var(--c-surface);
	border-color: var(--c-primary-soft);
	box-shadow: var(--shadow-xs);
	color: inherit;
	text-decoration: none;
}
.stock-pill .label {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--c-text-soft);
}
.stock-pill .count {
	font-family: var(--ff-num);
	font-variant-numeric: tabular-nums;
	font-size: 2.0rem;
	font-weight: 800;
	color: var(--c-primary);
}
.stock-pill .count small {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--c-text-mute);
	margin-left: 3px;
}

/* --- クイックアクション --- */
.quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-3);
}
.qa-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-4) var(--s-3);
	background: var(--c-surface);
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--c-text);
	font-weight: 600;
	font-size: 1.3rem;
	transition: all var(--t-fast) var(--ease);
	min-height: 96px;
	box-sizing: border-box;
}
.qa-btn:hover {
	border-color: var(--c-primary);
	background: var(--c-primary-pale);
	color: var(--c-primary);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.qa-btn .qa-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-primary-pale);
	border-radius: var(--r-md);
	transition: background var(--t-fast) var(--ease);
}
.qa-btn .qa-icon svg {
	width: 20px;
	height: 20px;
	fill: var(--c-primary);
}
.qa-btn:hover .qa-icon { background: var(--c-primary); }
.qa-btn:hover .qa-icon svg { fill: #fff; }

/* --- 大きい主要CTA --- */
.dash-cta {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}
@media screen and (max-width:768px) {
	.dash-cta { grid-template-columns: 1fr; }
}
.cta-primary {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-5);
	background: linear-gradient(135deg, var(--c-accent) 0%, #946919 100%);
	color: var(--c-text-on-dark);
	border-radius: var(--r-lg);
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: all var(--t-base) var(--ease);
	position: relative;
	overflow: hidden;
}
.cta-primary::after {
	content: "→";
	font-size: 2.4rem;
	font-weight: 800;
	margin-left: auto;
	transition: transform var(--t-base) var(--ease);
}
.cta-primary:hover {
	color: var(--c-text-on-dark);
	text-decoration: none;
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}
.cta-primary:hover::after { transform: translateX(4px); }
.cta-primary .cta-icon {
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,0.2);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cta-primary .cta-icon svg { width: 26px; height: 26px; fill: #fff; }
.cta-primary .cta-text { display: flex; flex-direction: column; gap: 2px; }
.cta-primary .cta-text strong {
	font-size: 1.7rem;
	font-weight: 700;
}
.cta-primary .cta-text span {
	font-size: 1.2rem;
	color: rgba(255,255,255,0.85);
}

.cta-secondary {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	text-decoration: none;
	color: var(--c-text);
	transition: all var(--t-base) var(--ease);
}
.cta-secondary:hover {
	color: var(--c-primary);
	text-decoration: none;
	border-color: var(--c-primary-soft);
	background: var(--c-primary-pale);
}
.cta-secondary .cta-icon {
	width: 40px;
	height: 40px;
	background: var(--c-surface-alt);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cta-secondary .cta-icon svg { width: 20px; height: 20px; fill: var(--c-primary); }
.cta-secondary .cta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cta-secondary .cta-text strong {
	font-size: 1.3rem;
	font-weight: 700;
}
.cta-secondary .cta-text span {
	font-size: 1.1rem;
	color: var(--c-text-mute);
}

/* --- データバー（簡易グラフ） --- */
.bar-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 8px 0;
}
.bar-row .b-label {
	width: 6em;
	flex-shrink: 0;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--c-text-soft);
}
.bar-row .b-bar {
	flex: 1;
	height: 8px;
	background: var(--c-surface-mute);
	border-radius: var(--r-pill);
	overflow: hidden;
	position: relative;
}
.bar-row .b-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--c-primary-soft), var(--c-primary));
	border-radius: var(--r-pill);
	transition: width var(--t-slow) var(--ease);
}
.bar-row .b-val {
	width: 5em;
	text-align: right;
	font-family: var(--ff-num);
	font-variant-numeric: tabular-nums;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--c-text);
	flex-shrink: 0;
}

/* --- セクション見出し（ダッシュボード内グループ） --- */
.dash-section-title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--c-text-mute);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: var(--s-5) 0 var(--s-3) 0;
}
.dash-section-title::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--c-accent);
}