/* 経理の画面（PCのブラウザ）。スマホ用の style.css のうえに重ねる */
body.admin{background:#f4f6f9}
body.admin header{position:static; padding:14px 24px}
body.admin header h1{font-size:17px}
.wrap{max-width:1180px; margin:0 auto; padding:20px 24px 60px}

.tabs{display:flex; gap:8px; margin-bottom:16px; border-bottom:2px solid #dfe4ea}
.tabs button{background:none; border:0; padding:10px 18px; font-size:14px; color:var(--sub);
             cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; font-family:inherit}
.tabs button.on{color:var(--accent-d); font-weight:700; border-bottom-color:var(--accent)}

.bar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.bar label{font-size:13px; color:var(--sub)}
.bar select{width:auto; margin:0; padding:8px 10px; font-size:14px}
.bar input[type=text]{margin:0}

.kpis{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.kpis div{background:#fff; border:1px solid var(--line); border-radius:10px;
          padding:12px 18px; min-width:140px}
.kpis span{display:block; font-size:11.5px; color:var(--sub)}
.kpis strong{font-size:20px}

.tbl{width:100%; border-collapse:collapse; background:#fff; font-size:13px;
     border:1px solid var(--line); border-radius:10px; overflow:hidden}
.tbl th,.tbl td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left;
                white-space:nowrap}
.tbl th{background:#e8eef6; font-weight:700; font-size:12px; position:sticky; top:0}
.tbl td.num,.tbl th.num{text-align:right}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.not-submitted td{color:var(--warn)}
.tbl tr:hover td{background:#f7fafd}

.pill{display:inline-block; font-size:11px; padding:2px 9px; border-radius:11px; background:#eef1f5; color:var(--sub)}
.pill.ok{background:#eaf6ee; color:#1b6b3c}
.pill.warn{background:#fff3e6; color:#8a4b14}
.pill.bad{background:#fdeeea; color:#8c2d1c}

.modal{position:fixed; inset:0; background:rgba(20,30,45,.45); display:flex;
       align-items:center; justify-content:center; z-index:30; padding:20px}
.modal[hidden]{display:none}
.modal-box{background:#fff; border-radius:14px; max-width:860px; width:100%;
           max-height:88vh; overflow:auto; padding:22px; position:relative}
.modal-close{position:absolute; top:12px; right:14px; border:0; background:none;
             font-size:24px; cursor:pointer; color:var(--sub); line-height:1}
.shots{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.shots img{max-width:260px; max-height:340px; border:1px solid var(--line); border-radius:8px}
.diff{font-size:13px; line-height:1.9; margin-top:10px}
.diff b{color:var(--accent-d)}

/* 承認待ちがあるタブを目立たせる */
.tabs button.alert{color:#b8541b; font-weight:700}