/* ============================================================
   業務システム 専用スタイル（公開サイトの style.css に追記する形）
   ============================================================ */
.side nav{padding-bottom:10px}
.mgroup{padding:18px 24px 8px;font-family:var(--ff-en);font-size:10px;letter-spacing:.24em;color:var(--gold-600)}
.side nav a{font-size:14px}

.alert{padding:14px 20px;border-left:2px solid var(--gold-500);background:rgba(40,65,85,.10);
  margin-bottom:22px;font-size:14.5px;color:var(--text)}
.alert.err{border-left-color:#E08A7A;background:rgba(224,138,122,.12)}

/* ツールバー（絞り込み・月切替） */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;
  padding:18px 22px;border:1px solid var(--line);background:var(--navy-850);margin-bottom:24px}
.toolbar form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.toolbar .f{display:grid;gap:6px}
.toolbar label{font-size:11.5px;letter-spacing:.12em;color:var(--gold-600)}
.toolbar input,.toolbar select{padding:10px 14px;background:rgba(40,65,85,.05);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:14.5px;min-width:150px}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--gold-500)}
.toolbar .acts{display:flex;gap:10px;align-items:center}

.month-nav{display:flex;align-items:center;gap:14px}
.month-nav a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--gold-400);transition:all .3s}
.month-nav a:hover{border-color:var(--gold-500);background:rgba(40,65,85,.1)}
.month-nav .now{font-family:var(--ff-en);font-size:20px;letter-spacing:.06em;color:var(--gold-300);min-width:112px;text-align:center}

/* 小さいボタン */
.btn-sm{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;font-size:13px;letter-spacing:.06em;
  border:1px solid var(--line-gold);color:var(--gold-300);transition:all .35s;cursor:pointer;background:none}
.btn-sm:hover{background:var(--gold-500);color:var(--navy-900);border-color:var(--gold-400)}
.btn-sm.solid{background:linear-gradient(120deg,var(--gold-600),var(--gold-400));color:var(--navy-900);
  border-color:transparent;font-weight:700}
.btn-sm.solid:hover{filter:brightness(1.1)}
.btn-sm.danger{border-color:rgba(224,138,122,.5);color:#E08A7A}
.btn-sm.danger:hover{background:#E08A7A;color:#0C1322}

/* テーブル */
.tbl-wrap{border:1px solid var(--line);background:var(--navy-850);overflow-x:auto}
.tbl-wrap .dtbl{min-width:100%}
.dtbl td.r,.dtbl th.r{text-align:right}
.dtbl td.c,.dtbl th.c{text-align:center}
.dtbl td a{color:var(--gold-300)}
.dtbl td a:hover{text-decoration:underline}
.dtbl tbody tr:last-child td{border-bottom:none}
.dtbl .wrap-cell{white-space:normal;min-width:220px}
.empty{padding:52px 20px;text-align:center;color:var(--muted);font-size:14.5px}

/* フォーム */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:26px;border:1px solid var(--line);background:var(--navy-850)}
.fgrid .full{grid-column:1/-1}
.fld{display:grid;gap:7px}
.fld label{font-size:13px;letter-spacing:.08em;color:var(--gold-600)}
.fld input,.fld select,.fld textarea{padding:13px 15px;background:rgba(40,65,85,.05);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:15.5px;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold-500);background:rgba(40,65,85,.06)}
.fld textarea{min-height:110px;resize:vertical}
.fld .hint{font-size:12px;color:var(--muted)}
.form-actions{display:flex;gap:14px;margin-top:24px;align-items:center}

/* ページ送り */
.pager{display:flex;gap:8px;justify-content:center;margin-top:28px;font-family:var(--ff-en);flex-wrap:wrap}
.pager a,.pager span{padding:10px 16px;border:1px solid var(--line);color:var(--muted);font-size:14px}
.pager .on{border-color:var(--gold-500);background:rgba(40,65,85,.14);color:var(--gold-300)}
.pager a:hover{border-color:var(--gold-500);color:var(--gold-300)}

/* シフト作成の表 */
.shift-grid td{vertical-align:top}
.slot{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.slot .who{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line-gold);
  font-size:12.5px;color:var(--gold-300);background:rgba(40,65,85,.07)}
.slot .who button{color:#E08A7A;font-size:14px;line-height:1;padding:0 2px}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form select,.inline-form input{padding:8px 12px;background:rgba(40,65,85,.05);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:13.5px}

/* 実績入力 */
.att-row input{width:88px;padding:8px 10px;background:rgba(40,65,85,.05);border:1px solid var(--line);
  color:var(--text);font-family:var(--ff-en);font-size:14px;text-align:center}
.att-row input:focus{outline:none;border-color:var(--gold-500)}

/* 明細（給与・請求） */
.doc{border:1px solid var(--line-gold);background:var(--navy-850);padding:clamp(26px,3vw,42px)}
.doc h2{font-family:var(--ff-serif);font-size:22px;font-weight:600;letter-spacing:.08em;margin-bottom:6px}
.doc .meta{font-size:13.5px;color:var(--muted);margin-bottom:26px}
.doc .lines{width:100%;border-collapse:collapse;margin-bottom:20px}
.doc .lines th{text-align:left;font-size:11.5px;letter-spacing:.14em;color:var(--gold-600);
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:500}
.doc .lines td{padding:12px;border-bottom:1px solid rgba(40,65,85,.05);font-size:14.5px;color:var(--text-soft)}
.doc .lines td.r{text-align:right;font-family:var(--ff-en);font-size:15px}
.doc .total{display:flex;justify-content:flex-end;gap:40px;padding-top:20px;border-top:1px solid var(--line-gold)}
.doc .total .lb{font-size:13px;color:var(--muted);letter-spacing:.1em}
.doc .total .v{font-family:var(--ff-en);font-weight:300;font-size:30px;color:var(--gold-300)}

/* ログイン画面 */
.login-wrap{min-height:100svh;display:grid;place-items:center;padding:60px 5%;
  background:radial-gradient(90% 80% at 50% 15%,rgba(30,48,79,.75),transparent 62%),linear-gradient(160deg,var(--navy-850),var(--ink-900))}
.login-box{width:min(460px,100%);border:1px solid var(--line-gold);background:rgba(8,13,26,.9);padding:clamp(32px,4vw,48px)}
.login-box .lh{text-align:center;margin-bottom:32px}
.login-box .lh svg{width:52px;height:58px}
.login-box .lh .en{display:block;font-family:var(--ff-en);font-size:11px;letter-spacing:.3em;color:var(--gold-500);margin-top:10px}
.login-box .lh h1{font-family:var(--ff-serif);font-size:24px;font-weight:600;letter-spacing:.1em;margin-top:8px}

/* 進捗バー（稼働率など） */
.meter{height:8px;background:rgba(40,65,85,.08);position:relative;min-width:90px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-600),var(--gold-300))}
.meter.low i{background:linear-gradient(90deg,#8a5a52,#E08A7A)}

/* 集計カード内の小さな表 */
.mini-list{display:grid;gap:12px}
.mini-list .r{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:14px}
.mini-list .r span{color:var(--text-soft)}
.mini-list .r b{font-family:var(--ff-en);font-weight:400;color:var(--gold-300);font-size:15px}

@media (max-width:860px){
  .fgrid{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar input,.toolbar select{min-width:0;width:100%}
  .toolbar form{flex-direction:column;align-items:stretch}
}
@media print{
  .side,.app-head,.toolbar,.form-actions,.no-print{display:none!important}
  body.app,.doc{background:#fff;color:#111}
  .app-wrap{display:block}
  .main{padding:0}
  .doc{border-color:#999}
  .doc h2,.doc .total .v{color:#111}
}


/* ============================================================
   新デザイン（紙の下地）に合わせた管理画面の調整
   ============================================================ */
.app-wrap{background:var(--navy-900)}
.side{background:var(--ink-900);color:var(--td-sub)}
.side nav a{color:var(--td-sub)}
.side nav a:hover,.side nav a.on{color:var(--sand);background:rgba(237,216,210,.08)}
.side .logo-txt strong{color:var(--td)}
.side .logo-txt span{color:var(--sand)}
.mgroup{color:rgba(185,199,207,.65)}
.app-head{background:#fff;border-bottom:1px solid var(--line)}
.toolbar{background:#fff}
.toolbar input,.toolbar select{background:#fff}
.card,.panel,.box,.kpi,.stat{background:#fff}
.tbl,.dtbl{background:#fff}
.tbl th{background:rgba(40,65,85,.05)}
.side .role{color:var(--sand);border-color:rgba(237,216,210,.22)}
.side .out a{color:var(--td-sub)}
.side .out a:hover{color:var(--sand)}

/* 読みやすさの調整（明るい紙面） */
.toolbar label,.tbl th,.dtbl th,.mgroup{color:#4E657C}
.up,.pill.ok,.ok{color:#2E7D5B}
.dn,.pill.wait,.wait,.pill.err{color:#B04A38}
.login-box{background:#fff}
.login-box h1,.login-box p,.login-box label{color:var(--text)}
.side .mgroup{color:rgba(185,199,207,.7)}
.muted,.sub,.note{color:#5A6C76}

/* 読みやすさの調整（管理画面の白い面：メイン領域とログイン画面） */
.main,.login-box{
  --gold-300:#3D5570;
  --gold-400:#4A6485;
  --text:#22313B;
  --text-soft:#4C5E69;
  color:var(--text);
}