/* ==========================================================================
   MDM コンソール — 共通スタイル

   設計の考え方
   ------------
   このシステムの本質は「機械が振った識別子」と「人が付けた名前」を
   結び付けることにある。だから書体でそれを表す。

     人が付けた名前・見出し・本文 → サンセリフ（--font-sans）
     機械が振った識別子・ファイル名・コマンド → 等幅（--font-mono）

   等幅が出ている場所は、必ず「システム側の値」。この規則は全画面で守る。

   色は 1 色だけ強い色（--signal: 深いティール）を使い、操作できるものに限る。
   注意を引きたい状態（名前のない端末）は琥珀、破壊的操作は赤。それ以外は
   無彩色に寄せて、色が付いていること自体を情報にする。

   罫線は横線だけ。縦の罫線を引くと表が檻のように見え、行数が増えたときに
   読みづらくなる。
   ========================================================================== */

:root {
    /* ---- 色 ---- */
    --paper:         #F7F8FA;   /* ページ地。わずかに寒色寄りの白 */
    --surface:       #FFFFFF;   /* カード */
    --surface-sunk:  #FAFBFC;   /* カード内の一段沈んだ面 */

    --ink:           #14171C;   /* 主たる文字 */
    --slate:         #5A6472;   /* 従属する文字 */
    --mute:          #8A93A0;   /* 補足・識別子 */

    --line:          #E4E7ED;   /* 罫線 */
    --line-strong:   #D2D7E0;   /* 入力欄の枠 */

    --signal:        #0B5566;   /* 操作できるもの */
    --signal-deep:   #08404E;
    --signal-tint:   #E7F1F3;

    --flag:          #8A5200;   /* 要対応（名前がない） */
    --flag-tint:     #FFF8E9;
    --flag-line:     #EFD9AE;

    --danger:        #A32217;   /* 破壊的操作 */
    --danger-tint:   #FEF4F2;
    --danger-line:   #EFC9C3;

    --ok:            #1B6E45;
    --ok-tint:       #ECF6F0;

    /* ---- 書体 ---- */
    --font-sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
                 "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Noto Sans Mono", monospace;

    /* ---- 余白の刻み（4px 基準）---- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;

    --radius:    6px;
    --radius-lg: 10px;
}

/* --------------------------------------------------------------- 土台 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------- 上部バー・骨格 */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--s5);
    height: 52px;
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.brand {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.brand:hover { text-decoration: none; }

.brand-mark {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    margin-right: var(--s2);
    vertical-align: 1px;
}

.topnav { display: flex; gap: var(--s1); margin-left: var(--s3); }

.topnav a {
    font-size: 13px;
    color: var(--slate);
    padding: 4px var(--s3);
    border-radius: var(--radius);
}
.topnav a:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.topnav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--paper); }

.topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

.whoami { font-size: 12px; color: var(--mute); }
.whoami strong { color: var(--slate); font-weight: 600; }

.wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--s6) var(--s5) var(--s7);
}

/* ------------------------------------------------------- ページ見出し */

.page-head { margin-bottom: var(--s5); }

.page-head h1 { font-size: 22px; }

.page-head .lede {
    margin: var(--s2) 0 0;
    color: var(--slate);
    font-size: 13px;
    max-width: 62ch;
}

.head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
}

/* ------------------------------------------------------------ 通知 */

.msg {
    padding: var(--s3) var(--s4);
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: var(--s2);
    border: 1px solid transparent;
}
.msg.success { background: var(--ok-tint);     color: var(--ok);     border-color: #CBE6D8; }
.msg.error   { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
.msg.warning { background: var(--flag-tint);   color: var(--flag);   border-color: var(--flag-line); }
.msg.info    { background: var(--signal-tint); color: var(--signal-deep); border-color: #C9DFE3; }

.msgs { margin-bottom: var(--s5); }

/* ----------------------------------------------------------- 部品 */

.eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mute);
    display: block;
    margin-bottom: var(--s1);
}

.btn {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
}
.btn:hover { background: var(--paper); border-color: var(--mute); }

.btn-primary {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
    font-weight: 600;
}
.btn-primary:hover { background: var(--signal-deep); border-color: var(--signal-deep); }

.btn-danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
.btn-danger:hover { background: var(--danger-tint); border-color: var(--danger); }

.btn-sm { padding: 6px 10px; font-size: 12px; }

input[type="text"], input[type="password"], select {
    font-family: inherit;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    max-width: 100%;
}
select { padding-right: var(--s5); }
input[type="file"] { font-family: inherit; font-size: 13px; color: var(--slate); }

/* 表示切り替え（セグメント） */
.seg {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
}
.seg a {
    font-size: 12.5px;
    color: var(--slate);
    padding: 5px 12px;
    border-radius: 4px;
    line-height: 1.4;
}
.seg a:hover { background: var(--paper); text-decoration: none; }
.seg a.on { background: var(--signal); color: #fff; font-weight: 600; }
.seg a.on:hover { background: var(--signal-deep); }

.count { font-size: 12px; color: var(--mute); font-family: var(--font-mono); }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    margin: var(--s5) 0 var(--s3);
    flex-wrap: wrap;
}

/* ------------------------------------------------- 端末カード（要） */

.stack { display: flex; flex-direction: column; gap: var(--s3); }

.dev {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 268px 1fr;
    overflow: hidden;
}

.dev-id {
    padding: var(--s4) var(--s4) var(--s4) var(--s5);
    border-right: 1px solid var(--line);
    background: var(--surface-sunk);
}

/* 人が付けた名前 */
.dev-name {
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    word-break: break-word;
}

/* 端末側の設定名。人が付けたものではないので一段落とす */
.dev-alias { margin: 2px 0 0; font-size: 12px; color: var(--slate); }

/* 機械が振った識別子。等幅で、目立たせない */
.dev-uuid {
    margin: var(--s2) 0 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.01em;
    color: var(--mute);
    word-break: break-all;
    line-height: 1.5;
}

.dev-owner { margin: var(--s3) 0 0; font-size: 12px; color: var(--slate); }
.dev-owner strong { font-weight: 600; color: var(--ink); }

.rename { margin-top: var(--s3); display: flex; gap: var(--s1); }
.rename input[type="text"] { flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 8px; }

.dev-body { padding: var(--s4) var(--s5); min-width: 0; }

/* 端末の状態 */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin-bottom: var(--s3);
}
.fact { font-size: 12px; }
.fact .k { color: var(--mute); margin-right: var(--s2); }
.fact .v { color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; }

.unseen {
    font-size: 12px;
    color: var(--mute);
    background: var(--surface-sunk);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s3);
}

details.profiles { margin-bottom: var(--s4); }
details.profiles summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--slate);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
}
details.profiles summary::-webkit-details-marker { display: none; }
details.profiles summary::before {
    content: "▸";
    color: var(--mute);
    font-size: 10px;
    transition: transform 120ms ease;
}
details.profiles[open] summary::before { transform: rotate(90deg); }
details.profiles ul {
    margin: var(--s2) 0 0;
    padding: var(--s2) 0 0 var(--s4);
    list-style: none;
    border-top: 1px solid var(--line);
}
details.profiles li { font-size: 12px; color: var(--slate); padding: 2px 0; }

.tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--signal-tint);
    color: var(--signal-deep);
    margin-left: var(--s2);
}

/* 操作の並び */
.ctrls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
}
.ctrl { min-width: 0; }
.ctrl form { display: flex; gap: var(--s1); align-items: center; }
.ctrl select { max-width: 210px; }

.ctrls-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s3) var(--s5);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px dashed var(--danger-line);
}

.locked {
    font-size: 12px;
    color: var(--mute);
    padding-bottom: 6px;
}

/* --------------------------------------- 名前のない端末（要対応） */

.flagged {
    background: var(--flag-tint);
    border: 1px solid var(--flag-line);
    border-radius: var(--radius-lg);
    padding: var(--s4) var(--s5) var(--s5);
    margin-bottom: var(--s5);
}
.flagged h2 { font-size: 15px; color: var(--flag); }
.flagged .lede { margin: var(--s1) 0 var(--s4); font-size: 12.5px; color: #7A5416; max-width: 66ch; }

/* 未設定は「まだ完成していない記録」なので、枠を破線にして未完了を示す */
.newdev {
    background: var(--surface);
    border: 1px dashed var(--flag-line);
    border-radius: var(--radius);
    padding: var(--s3) var(--s4);
    display: flex;
    align-items: center;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s2);
}
.newdev:last-child { margin-bottom: 0; }
.newdev-id { flex: 1 1 300px; min-width: 0; }
.newdev-id .dev-alias { margin-top: 0; }
.newdev form { display: flex; gap: var(--s1); align-items: center; }

/* ------------------------------------------------------- 空の状態 */

.empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s7) var(--s5);
    text-align: center;
    color: var(--slate);
    font-size: 13px;
}
.empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: var(--s2); font-weight: 600; }

/* ------------------------------------------------ ファイル管理の表 */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: var(--s5);
    overflow: hidden;
}

.panel-head {
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
}
.panel-head h2 { font-size: 15px; }
.panel-head .ext { font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-left: var(--s2); font-weight: 400; }
.panel-head form { display: flex; align-items: center; gap: var(--s2); }

.rows { width: 100%; border-collapse: collapse; }
.rows th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 400;
    padding: var(--s2) var(--s5);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
}
.rows td {
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 13px;
}
.rows tr:last-child td { border-bottom: none; }
.rows tr:hover td { background: var(--surface-sunk); }

.rows .c-file { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate); word-break: break-all; }
.rows .c-owner { font-size: 12px; color: var(--slate); white-space: nowrap; }
.rows .c-act { text-align: right; white-space: nowrap; }
.rows form { display: flex; gap: var(--s1); align-items: center; }
.rows .c-act form { justify-content: flex-end; }

.rows .none { color: var(--mute); padding: var(--s5); text-align: center; font-size: 13px; }

/* ------------------------------------------------------ 手順ページ */

.prose { max-width: 74ch; }
.prose h2 { font-size: 15px; margin-top: var(--s6); }
.prose p { color: var(--slate); }
.prose code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--ink);
    word-break: break-all;
}
.prose pre {
    font-family: var(--font-mono);
    font-size: 12px;
    background: #12151A;
    color: #E6EAF0;
    border-radius: var(--radius);
    padding: var(--s3) var(--s4);
    overflow-x: auto;
    margin: var(--s3) 0;
    line-height: 1.7;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; }

.step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    padding: var(--s4) var(--s5);
    margin: var(--s3) 0;
}
.step p:first-child { margin-top: 0; }
.step p:last-child { margin-bottom: 0; }

.note { font-size: 12px; color: var(--mute); }

.dl-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }

/* ------------------------------------------------------ ログイン */

.signin {
    max-width: 340px;
    margin: 12vh auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s6) var(--s5);
}
.signin h1 { font-size: 18px; margin-bottom: var(--s5); }
.signin label { display: block; font-size: 12px; color: var(--slate); margin-bottom: var(--s1); }
.signin p { margin: 0 0 var(--s4); }
.signin input[type="text"], .signin input[type="password"] { width: 100%; }
.signin .btn { width: 100%; padding: 10px; }

/* ------------------------------------------------------ 狭い画面 */

@media (max-width: 860px) {
    .dev { grid-template-columns: 1fr; }
    .dev-id { border-right: none; border-bottom: 1px solid var(--line); padding-left: var(--s4); }
    .dev-body { padding: var(--s4); }
    .wrap { padding: var(--s5) var(--s4) var(--s6); }
    .topbar-inner { padding: 0 var(--s4); }
    .rows th:nth-child(3), .rows td:nth-child(3) { display: none; }  /* 所有者列を隠す */
    .rows th, .rows td { padding-left: var(--s4); padding-right: var(--s4); }
    .panel-head { padding: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ファイル詳細：ラベル行が並ぶ表では、左見出し列を揃える */
.rows th[style] { vertical-align: middle; }
.rows td .c-file a { color: var(--signal); }

/* ------------------------------------------------ ファイル一覧の別名欄

   別名は長くなりがちなので、入力欄を列幅いっぱいまで伸ばす。
   size="24" のような固定幅だと、画面が広くても短いままになる。
   それでも収まらない分は title 属性のツールチップで読める。 */

.rows { width: 100%; table-layout: auto; }

.rows td.c-label { width: 45%; }
.rows .label-input {
    flex: 1;
    min-width: 200px;
    width: 100%;
}

/* ファイル名は折り返さず、長ければ末尾を省略する。
   全文は title 属性のツールチップで確認できる。 */
.rows .c-file a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 860px) {
    .rows td.c-label { width: auto; }
    .rows .label-input { min-width: 140px; }
}

/* ------------------------------------------- 端末に入っている設定

   配信した設定が実際に端末へ入ったかを確認する場所。
   折りたたむと確認のたびに開く操作が要るので、常に見せる。
   このサーバから配信したものは印を付けて区別する。 */

.installed { margin-bottom: var(--s3); }

.chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--slate);
}

/* このサーバから配信したもの */
.chip-known {
    background: var(--signal-tint);
    border-color: #C9DFE3;
    color: var(--signal-deep);
    font-weight: 600;
}

.chip-mark { font-size: 8px; color: var(--signal); }

/* 端末側の表示名と、サーバ側のファイル別名が違うときに添える */
.chip-src {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--mute);
    font-weight: 400;
}

/* ------------------------------------------- コマンド送信直後の案内

   MDM のコマンドは非同期なので、押した直後には結果が出ない。
   通常の成功メッセージと同じ見た目だと待つべきことに気づけないので、
   左に色帯を入れ、待機中であることを分かる形にする。 */

.msg.pending {
    background: var(--flag-tint);
    border-color: var(--flag-line);
    border-left: 4px solid var(--flag);
    color: #6E4400;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s3);
    padding: var(--s4) var(--s4);
}

/* 残り秒数。等幅にして数字が動いても幅が変わらないようにする */
.pending-note {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: #8A5A10;
}

.msg.pending .btn {
    border-color: var(--flag-line);
    background: #fff;
    color: #6E4400;
}
.msg.pending .btn:hover { background: #FFF3D6; border-color: var(--flag); }