/* ==========================================================
   components/dashboard.css
   ----------------------------------------------------------
   ironman のトップページ（themes/ironman/dashboard/index。D-49-07）。

   ・SYSTEM STATUS の帯
   ・アークリアクターと、左右の状態のパネル（パソコンは3列、狭い画面は縦に並べる）
   ・お知らせ
   ・種類ごとの入口のパネル

   パネルの背景は、状態の色をうっすら含んだ色（上ほど少し濃く、内側にかすかな光。D-49-10）。文字の基本は白で、状態を表す部分
   （英字の札・光る点・状態の英字・今の値・枠の色）だけを状態の色にする。

   状態の色（data-state）：
     ok・normal（青）／warn・warning（金）／error・critical（赤）／none（判定しない：灰）
   ========================================================== */


/* HUD のパネルの土台（.hud-panel・枠・四隅の印・見出しの行）と、マウスを乗せたときの光・枠を流れる電気は components/panel.css */


/* ==========================================================
   状態のパネル
   ========================================================== */

.hud-status-panel[data-state="warn"] {
    --hud-accent: var(--im-gold);
    --hud-border: rgba(242, 194, 91, 0.35);
}

.hud-status-panel[data-state="error"] {
    --hud-accent: var(--im-red);
    --hud-border: rgba(255, 90, 82, 0.45);
    box-shadow:
        inset 0 0 22px color-mix(in srgb, var(--hud-accent) 12%, transparent),
        0 0 14px rgba(255, 90, 82, 0.15);
}

.hud-status-panel[data-state="none"] {
    --hud-accent: var(--im-text-faint);
}

/* 右上の状態（光る点＋英字） */
.hud-panel-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--im-font-hud);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--hud-accent);
}

.hud-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hud-accent);
    box-shadow: 0 0 8px var(--hud-accent);
}

.hud-status-panel[data-state="error"] .hud-dot {
    animation: hudBlink 1.2s steps(2, jump-none) infinite;
}

@keyframes hudBlink {

    50% {
        opacity: 0.25;
    }

}

/* 今の値（大きく） */
.hud-panel-value {
    margin: 4px 0 2px;
    font-family: var(--im-font-hud);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.hud-status-panel[data-state="warn"] .hud-panel-value { color: var(--im-gold); }
.hud-status-panel[data-state="error"] .hud-panel-value { color: var(--im-red); }
.hud-status-panel[data-state="none"] .hud-panel-value { color: var(--im-text-dim); }

.hud-panel-line {
    margin: 0;
    font-size: 13px;
    color: var(--im-text);
}

.hud-panel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
}

.hud-panel-foot form,
.hud-panel-foot p {
    margin: 0;
}


/* ==========================================================
   SYSTEM STATUS の帯
   ========================================================== */

.hud-statusbar {
    --hud-accent: var(--im-cyan);

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    margin-bottom: 8px;
    padding: 8px 16px;
    background: transparent;
    border-left: 3px solid var(--hud-accent);
}

.hud-statusbar[data-state="warning"] { --hud-accent: var(--im-gold); }
.hud-statusbar[data-state="critical"] { --hud-accent: var(--im-red); }

.hud-statusbar-title {
    font-family: var(--im-font-logo);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--im-text);
}

.hud-statusbar-state {
    font-family: var(--im-font-logo);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hud-accent);
    text-shadow: 0 0 10px var(--hud-accent);
}

.hud-statusbar-counts {
    display: inline-flex;
    gap: 12px;
    font-family: var(--im-font-hud);
    font-weight: 600;
}


/* ==========================================================
   アークリアクターと左右の状態のパネル
   ========================================================== */

.hud-core {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(300px, 380px) minmax(220px, 1fr);
    align-items: center;
    gap: 24px;
    margin: 8px 0 32px;
}

.hud-panels {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hud-reactor .reactor {
    width: 100%;
}

/* パソコンの幅：線が見えるよう、アークリアクターとパネルの間を広げる */
@media (min-width: 1025px) {

    .hud-core {
        column-gap: 56px;
    }

}


/* ==========================================================
   アークリアクターから各パネルへの線（js/dashboard/connectors.js が描く）
   ----------------------------------------------------------
   パネルの状態の色。光が、アークリアクターからパネルへ流れる。
   線は、トップページの全てのパネルに引き、普段は出さない。マウスを乗せているパネルの線だけ出し（is-active）、
   電気を流す（is-flowing。アニメーションの設定 connectors で止めているときは流さない）。D-73-03
   ========================================================== */

/* 線を引く範囲（アークリアクター・状態のパネル・お知らせ・入口のパネル） */
.hud-board {
    position: relative;
}

.hud-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.hud-connector {
    --hud-accent: var(--im-cyan);
    opacity: 0;
    transition: opacity var(--im-ease);
}

.hud-connector.is-active {
    opacity: 1;
}

.hud-connector[data-state="warn"] { --hud-accent: var(--im-gold); }
.hud-connector[data-state="error"] { --hud-accent: var(--im-red); }
.hud-connector[data-state="none"] { --hud-accent: var(--im-text-faint); }

.hud-connector-line,
.hud-connector-flow {
    fill: none;
    stroke: var(--hud-accent);
    stroke-linejoin: round;
}

.hud-connector-line {
    stroke-width: 1;
    opacity: 0.45;
}

.hud-connector-flow {
    stroke-width: 1.6;
    stroke-dasharray: 10 22;
    filter: drop-shadow(0 0 3px var(--hud-accent));
    animation: hudConnectorFlow 1.6s linear infinite;
    animation-play-state: paused;
}

.hud-connector.is-flowing .hud-connector-flow {
    animation-play-state: running;
}

@keyframes hudConnectorFlow {

    to {
        stroke-dashoffset: -32;
    }

}

.hud-connector-start {
    fill: var(--hud-accent);
    filter: drop-shadow(0 0 4px var(--hud-accent));
}

.hud-connector-end {
    fill: var(--im-bg);
    stroke: var(--hud-accent);
    stroke-width: 1.5;
}

/* 狭い画面：アークリアクター → パネルの順に縦に並べる */
@media (max-width: 1024px) {

    .hud-core {
        grid-template-columns: 1fr 1fr;
    }

    .hud-reactor {
        grid-column: 1 / -1;
        order: -1;
    }

    .hud-reactor .reactor {
        width: min(80vw, 340px);
    }

}

@media (max-width: 640px) {

    .hud-core {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   その場限りの表示（操作の結果・入力の誤りなど。SYSTEM STATUS の帯の上。D-74）
   要対応・注意のお知らせは、お知らせの画面に移した
   ========================================================== */

.hud-messages > p,
.hud-messages > div {
    margin: 0 0 10px;
}


/* ==========================================================
   種類ごとの入口のパネル
   ========================================================== */

.hud-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.hud-link-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hud-link-panel li {
    border-bottom: 1px solid var(--im-line-faint);
}

.hud-link-panel li:last-child {
    border-bottom: 0;
}

.hud-link-panel a {
    display: block;
    padding: 6px 4px 6px 16px;
    position: relative;
    text-decoration: none;
    transition: background var(--im-ease), color var(--im-ease);
}

/* 行の頭の印 */
.hud-link-panel a::before {
    content: "›";
    position: absolute;
    left: 2px;
    color: var(--im-line-strong);
}

.hud-link-panel a:hover {
    background: rgba(102, 217, 255, 0.07);
}

.hud-link-panel a:hover::before {
    color: var(--im-cyan-bright);
}



/* ==========================================================
   狭い画面で、はみ出さないようにする
   ========================================================== */

.hud-core > *,
.hud-links > * {
    min-width: 0;
}

.hud-panel-head {
    flex-wrap: wrap;
}

.hud-panel-value,
.hud-panel-line {
    overflow-wrap: anywhere;
}


/* ==========================================================
   画面「AdSense」のカード（D-67）：線と棒を HUD の光の色に
   ========================================================== */

.adsense-spark {
    color: var(--im-cyan);
    filter: drop-shadow(0 0 3px var(--im-cyan-glow));
}

.adsense-bar span {
    background: var(--im-cyan);
    box-shadow: 0 0 6px var(--im-cyan-glow);
}

.adsense-bar-previous span {
    background: rgba(102, 217, 255, 0.3);
    box-shadow: none;
}

.adsense-row {
    border-bottom-color: var(--im-line-faint);
}

.adsense-figure-value,
.adsense-metric-value {
    color: var(--im-cyan-bright);
    font-family: var(--im-font-hud);
    text-shadow: var(--im-glow-text);
}

.adsense-up {
    color: var(--im-ok);
}

.adsense-down {
    color: var(--im-red);
}