/* ===== YOG 発注管理システム — material v3 ===== */
:root{
  --bg0:#020814;
  --bg1:#061120;
  --bg2:#0a1830;

  --text:#e7f1ff;
  --text-soft:#b1c6df;
  --text-dim:#7f95b1;

  --line:rgba(118,173,255,.18);
  --line-strong:rgba(120,184,255,.42);
  --panel-fill:rgba(7,18,34,.54);
  --panel-head:rgba(5,14,28,.48);

  --accent:#5a9cff;
  --accent2:#2e66b8;

  --danger:#ff6b6b;
  --danger-bg:rgba(117,18,18,.32);
  --danger-border:rgba(173,46,46,.34);

  --shadow:0 24px 48px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  color:var(--text);
  font-family:"Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
  letter-spacing:.02em;
  background:
    radial-gradient(38rem 16rem at 10% 0%, rgba(23,84,181,.16), transparent 58%),
    radial-gradient(48rem 20rem at 88% 8%, rgba(10,53,130,.12), transparent 52%),
    linear-gradient(180deg,#03101d 0%, #04101c 38%, #03101b 100%);
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:auto -8% -4% auto;
  width:64rem;
  height:28rem;
  pointer-events:none;
  opacity:.42;
  background:
    radial-gradient(ellipse at 78% 72%, rgba(67,151,255,.14) 0%, rgba(67,151,255,0) 48%),
    radial-gradient(ellipse at 68% 84%, rgba(117,198,255,.08) 0%, rgba(117,198,255,0) 50%);
  filter:blur(2px);
}
body::after{
  content:"";
  position:fixed;
  right:-8rem;
  bottom:-4rem;
  width:70rem;
  height:30rem;
  pointer-events:none;
  opacity:.34;
  background:
    radial-gradient(ellipse 90% 52% at 100% 100%, rgba(84,183,255,.18), rgba(84,183,255,0) 58%),
    radial-gradient(ellipse 84% 38% at 100% 100%, rgba(84,183,255,.12), rgba(84,183,255,0) 52%),
    radial-gradient(ellipse 72% 24% at 100% 100%, rgba(84,183,255,.10), rgba(84,183,255,0) 48%);
  transform:rotate(-8deg);
}

/* ===== ヘッダ ===== */
.app-header{
  position:relative;
  height:132px;
  display:flex;
  align-items:center;
  padding:0 26px;
  border-bottom:1px solid rgba(73,132,218,.24);
  background:linear-gradient(180deg, rgba(10,26,49,.92) 0%, rgba(8,19,35,.94) 100%);
  overflow:hidden;
}
.app-header::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:340px;
  background:radial-gradient(circle at 28% 50%, rgba(53,129,235,.18), transparent 56%);
  pointer-events:none;
}
.app-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg, rgba(97,170,255,.95), rgba(97,170,255,.25) 40%, transparent 70%);
}
.logo-wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  height:100%;
}
.logo-img{
  display:block;
  height:96px;
  width:auto;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.22));
}

/* ===== ログイン画面 ===== */
.login-page{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px;
}
.login-box{
  width:100%; max-width:400px;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, var(--panel-fill), rgba(5,15,29,.52));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.login-logo{
  display:flex; align-items:center; justify-content:center;
  padding:32px 24px 24px;
  border-bottom:1px solid rgba(44,78,125,.26);
  background:linear-gradient(180deg, rgba(4,12,25,.34), rgba(5,14,28,.12));
}
.login-logo img{height:64px; width:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.22))}
.login-body{padding:28px 32px 32px}
.login-field{margin-bottom:18px}
.login-field label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px}
.login-field input{width:100%; max-width:100%}
.login-error{
  margin-bottom:16px; padding:10px 14px; border-radius:8px;
  font-size:12px; color:#f08b8b;
  background:rgba(80,10,10,.42); border:1px solid var(--danger-border);
}
.btn-login{
  width:100%; padding:12px; border:none; border-radius:12px; cursor:pointer;
  color:#eef5ff; font-size:15px; font-weight:700;
  background:linear-gradient(180deg, rgba(121,176,255,.96) 0%, rgba(73,131,225,.96) 42%, rgba(42,91,177,.98) 100%);
  box-shadow:0 10px 24px rgba(28,82,164,.30), inset 0 1px 0 rgba(255,255,255,.24);
  margin-top:8px;
}
.btn-login:hover{filter:brightness(1.05)}

/* ===== ヘッダ内ユーザー表示（menu画面） ===== */
.header-user{
  margin-left:auto; display:flex; align-items:center; gap:12px;
  position:relative; z-index:1;
}

/* ===== ナビバー内ユーザー表示 ===== */
.nav-spacer{flex:1}
.nav-user{font-size:12px; color:var(--text-dim)}
.btn-logout{
  font-size:12px; padding:5px 12px; border-radius:7px;
  border:1px solid rgba(64,108,180,.22);
  background:rgba(13,31,56,.72); color:var(--text-dim); cursor:pointer;
}
.btn-logout:hover{color:var(--text); background:rgba(22,46,80,.88)}

/* ===== コンパクトヘッダ（一覧・取込画面） ===== */
.app-header.compact{height:68px}
.app-header.compact .logo-img{height:44px}

/* ===== ナビゲーション ===== */
.app-nav{
  height:42px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 26px;
  background:rgba(3,10,18,.7);
  border-bottom:1px solid rgba(40,74,122,.22);
}
.app-nav a{
  padding:8px 14px;
  border-radius:8px;
  color:var(--text-soft);
  text-decoration:none;
  font-size:13px;
}
.app-nav a.active,
.app-nav a:hover{
  color:#eef5ff;
  background:rgba(46,92,166,.22);
}

/* 第2階層ナビ。主分類の中の画面移動。上段より一段控えめに見せる。 */
.app-nav-sub{
  height:36px;
  padding:0 26px 0 40px;
  background:rgba(3,10,18,.5);
  border-bottom:1px solid rgba(40,74,122,.16);
  overflow-x:auto;
}
.app-nav-sub a{
  padding:6px 12px;
  font-size:12px;
  white-space:nowrap;
}

/* ===== ページ本体 ===== */
.page-body{
  max-width:1560px;
  margin:0 auto;
  padding:26px 24px 42px;
}
.page-note{
  margin:0 0 18px;
  font-size:12px;
  color:rgba(173,197,226,.78);
}

/* ===== ダッシュボード ===== */
.dashboard{
  display:grid;
  grid-template-columns:390px minmax(620px,1fr) 340px;
  gap:28px;
  align-items:start;
}
@media (max-width:1360px){
  .dashboard{grid-template-columns:360px 1fr 300px; gap:22px}
}
@media (max-width:1180px){
  .dashboard{grid-template-columns:1fr}
}

/* ===== ガラスパネル ===== */
.panel{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, var(--panel-fill), rgba(5,15,29,.52));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(151,205,255,.42), rgba(151,205,255,.08) 48%, transparent 82%);
}
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 18%);
  pointer-events:none;
}

.panel-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:18px 22px 16px;
  border-bottom:1px solid rgba(44,78,125,.26);
  background:linear-gradient(180deg, rgba(4,12,25,.34), rgba(5,14,28,.12));
}
.panel-title{
  position:relative;
  padding-left:16px;
  font-size:19px;
  font-weight:700;
  color:#eef5ff;
}
.panel-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:24px;
  border-radius:3px;
  background:linear-gradient(180deg, rgba(113,180,255,.96), rgba(58,104,191,.74));
  box-shadow:0 0 14px rgba(104,171,255,.28);
}
.panel-count{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.panel-count .num{
  font-size:22px;
  font-weight:800;
  color:#f4f8ff;
}
.panel-count .unit{
  font-size:12px;
  color:var(--text-dim);
}

.panel-body{
  position:relative;
  z-index:1;
  padding:18px 22px 22px;
}
.summary{
  font-size:12px;
  color:var(--text-dim);
  margin:0 0 18px;
}

/* 受注一覧リンク行 */
.row-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid rgba(78,124,189,.20);
  background:linear-gradient(180deg, rgba(10,24,45,.62), rgba(7,17,33,.56));
  text-decoration:none;
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.row-link:hover{
  border-color:rgba(108,163,231,.30);
  background:linear-gradient(180deg, rgba(11,28,52,.70), rgba(8,20,38,.64));
}
.row-link .title{font-size:16px; line-height:1.2}
.row-link .sub{display:block; margin-top:5px; font-size:12px; color:var(--text-dim)}
.row-link .arrow{color:rgba(141,172,216,.46); font-size:20px}

/* 照合ボタン */
.cta-wrap{margin-top:18px}
.btn-cta{
  width:100%;
  min-height:68px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  color:#eef5ff;
  font-size:18px;
  font-weight:800;
  letter-spacing:.06em;
  background:linear-gradient(180deg, rgba(121,176,255,.96) 0%, rgba(73,131,225,.96) 42%, rgba(42,91,177,.98) 100%);
  box-shadow:
    0 12px 28px rgba(28,82,164,.34),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn-cta:hover{filter:brightness(1.05)}
.btn-info{
  margin-top:10px;
  font-size:12px;
  text-align:center;
  color:var(--text-dim);
  min-height:18px;
}

/* 例外処理リスト */
.panel-list{
  position:relative;
  z-index:1;
  padding:4px 0;
}
.panel-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:18px;
  min-height:76px;
  padding:0 20px 0 22px;
  border-top:1px solid rgba(33,63,104,.22);
  text-decoration:none;
  color:var(--text);
}
.panel-item:first-child{border-top:none}
.panel-item:hover{background:linear-gradient(90deg, rgba(56,109,189,.11), rgba(56,109,189,0) 55%)}
.panel-item .label{font-size:16px}
.panel-item .arrow{color:rgba(141,172,216,.46); font-size:20px}

.count-badge{
  min-width:60px;
  padding:8px 14px;
  text-align:center;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#ffd0d0;
  background:linear-gradient(180deg, rgba(138,19,19,.62), rgba(98,12,12,.66));
  border:1px solid var(--danger-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.count-badge.neutral{
  color:#a8c3e6;
  background:linear-gradient(180deg, rgba(18,38,70,.72), rgba(12,25,46,.72));
  border-color:rgba(60,97,146,.24);
}

/* 取込・マスター（スリム） */
.slim-panel .panel-body{padding:0}
.slim-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:86px;
  padding:0 22px;
  text-decoration:none;
  color:var(--text);
}
.slim-item:hover{background:linear-gradient(90deg, rgba(56,109,189,.11), rgba(56,109,189,0) 55%)}
.slim-note{display:block; margin-top:6px; font-size:11px; color:var(--text-dim)}

/* ===== 取込画面 — セクション積み ===== */
.import-stack{display:flex; flex-direction:column; gap:20px}
.import-body{padding:20px 22px 26px}
.import-body label{font-size:13px; color:var(--text-soft)}
.import-body .form-row{margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.btn-import{
  padding:8px 22px;
  border-radius:10px;
  border:1px solid rgba(64,108,180,.34);
  background:linear-gradient(180deg, rgba(38,72,138,.92), rgba(24,50,104,.96));
  color:#cfe3ff;
  font-size:13px;
  cursor:pointer;
}
.btn-import:hover{background:linear-gradient(180deg, rgba(50,90,160,.96), rgba(32,62,120,.98))}

/* ===== テーブルパネル（一覧画面共通） ===== */
.table-panel{
  border-radius:14px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.016), transparent 15%),
    linear-gradient(180deg, rgba(8,20,37,.92), rgba(5,16,30,.96));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.table-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid rgba(45,74,120,.28);
  background:linear-gradient(180deg, rgba(3,12,25,.56), rgba(4,12,22,.2));
}
.table-panel-title{font-size:18px; font-weight:700; color:var(--text)}
.table-panel-count{font-size:12px; color:var(--text-dim)}
.filter-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-bottom:1px solid rgba(45,74,120,.22);
  color:var(--text-dim);
  font-size:12px;
}

/* ===== テーブル ===== */
table{width:100%; border-collapse:collapse}
th{
  background:linear-gradient(180deg,#0d213f,#0b1b34);
  color:#dcedff;
  font-size:12px;
  text-align:left;
  padding:10px 12px;
  border-right:1px solid rgba(62,92,140,.3);
}
td{
  padding:10px 12px;
  color:var(--text);
  border-top:1px solid rgba(25,45,78,.36);
  border-right:1px solid rgba(25,45,78,.18);
  background:rgba(7,18,35,.78);
}
tbody tr:nth-child(even) td{background:rgba(9,21,40,.88)}
tbody tr:hover td{background:rgba(16,34,61,.98)}

td.center{text-align:center}
td.right{text-align:right}

tr.state-保留         td{background:rgba(24,22,8,.95)}
tr.state-除外         td{color:#364660}
tr.state-後続処理待ち td{background:rgba(7,24,20,.95)}

.未割当 {color:#d14d4d; font-weight:700}
.不整合 {color:#c07a20; font-weight:700}
.割当済み{color:#8eb7ff}

/* ===== ボタン（テーブル内）===== */
.btn{
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  border:1px solid rgba(64,108,180,.28);
  background:rgba(13,31,56,.92);
  color:#cfe3ff;
}
.btn:hover{background:rgba(22,46,80,.98)}
.btn-exclude{margin-left:4px}

/* ===== バッジ ===== */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(15,34,62,.92);
  color:#8eb7ff;
  border:1px solid rgba(61,103,171,.22);
}
.badge.warn{
  background:rgba(94,14,14,.92);
  color:#ff7373;
  border-color:rgba(144,44,44,.34);
}

/* ===== 通知 ===== */
.notify{
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:10px;
  font-size:12px;
  border:1px solid rgba(64,108,180,.18);
  background:rgba(8,20,37,.72);
}
.notify-success{color:#91cfa9}
.notify-warn{color:#d7b56d}
.notify-error{color:#f08b8b}

/* ===== フォーム ===== */
select,
input[type="file"],
input[type="text"],
input[type="number"]{
  background:rgba(9,22,39,.84);
  color:var(--text);
  border:1px solid rgba(67,104,162,.26);
  border-radius:8px;
  padding:8px 10px;
  font-size:12px;
}

/* ===== 取込画面 ===== */
.warning-box{
  padding:12px 16px;
  border-radius:10px;
  border:1px solid rgba(140,100,20,.4);
  background:rgba(20,14,4,.72);
  font-size:12px;
  line-height:1.8;
  color:#c8a050;
  margin-bottom:14px;
}
.warning-box strong{color:#e0b860}
.col-list{margin-top:12px; font-size:11px; color:var(--text-dim)}
.col-list code{
  display:inline-block;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(67,104,162,.26);
  padding:2px 7px;
  margin:2px;
  border-radius:4px;
  color:var(--text-soft);
  font-family:monospace;
}

/* ===== 入力フォーム共通 ===== */
.form-body{padding:22px 24px 28px}

.record-info{
  padding:14px 18px;
  border-radius:10px;
  border:1px solid rgba(60,95,150,.24);
  background:rgba(8,20,38,.68);
  font-size:13px;
  line-height:2;
  margin-bottom:22px;
  color:var(--text-soft);
}
.record-info strong{color:var(--text); font-weight:600}

.form-field{
  display:grid;
  grid-template-columns:160px 1fr;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(30,55,90,.24);
}
.form-field:first-of-type{border-top:none}

.form-label{
  font-size:13px;
  color:var(--text-soft);
  text-align:right;
  padding-right:4px;
}
.required{color:#f08b8b; margin-left:3px}

input[type="text"],
input[type="number"]{
  width:100%;
  max-width:280px;
}

.form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(30,55,90,.24);
}
.btn-submit{
  padding:10px 28px;
  border-radius:10px;
  border:none;
  background:linear-gradient(180deg, rgba(80,140,230,.96), rgba(42,91,177,.98));
  color:#eef5ff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(28,82,164,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-submit:hover{filter:brightness(1.06)}
.btn-cancel{
  font-size:13px;
  color:var(--text-dim);
  text-decoration:none;
}
.btn-cancel:hover{color:var(--text-soft)}

/* ===== 照合ステータス ===== */
.info-warn{color:#d7b56d}
.info-ok  {color:#91cfa9}

/* ===== 一覧画面 — セル状態 ===== */
td.missing{background:rgba(90,12,12,.52) !important; color:#f08b8b}
tr.drafted td{color:var(--text-dim); opacity:.58}

/* ===== 価格差異 ===== */
.diff-plus {color:#f08b8b; font-weight:700}
.diff-minus{color:#7aaeff; font-weight:700}