/* =====================================================================
   日栄システム デザインシステム（クリーン&プロフェッショナル／ティール／ライト）
   ---------------------------------------------------------------------
   Tailwind の purge に依存しない手書きCSS。ビルド不要の静的ファイルとして
   layouts/app.blade.php・guest.blade.php から app.css の後に読み込む。
   コンポーネントは nc- プレフィックスのクラスで提供する。
   ===================================================================== */

:root {
  /* neutrals — cool grey with a slight teal bias */
  --nc-bg:         #f4f7f6;
  --nc-surface:    #ffffff;
  --nc-surface-2:  #fafcfb;
  --nc-line:       #e4ebe9;
  --nc-line-strong:#d3dedb;
  --nc-ink:        #10312e;
  --nc-body:       #40514e;
  --nc-muted:      #7c8c89;
  /* accent — teal */
  --nc-accent:     #0d9488;
  --nc-accent-dk:  #0f766e;
  --nc-accent-ink: #0b5f57;
  --nc-accent-50:  #f0fdfa;
  --nc-accent-100: #d5f2ee;
  /* semantic */
  --nc-ok:#15803d;    --nc-ok-bg:#e9f6ee;
  --nc-warn:#b45309;  --nc-warn-bg:#fdf3e7;
  --nc-danger:#c2372c;--nc-danger-bg:#fbeaea;
  --nc-radius: 10px;
  --nc-shadow: 0 1px 2px rgba(16,49,46,.06), 0 6px 18px rgba(16,49,46,.05);
  --nc-font: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

/* ---------- base ---------- */
body.nc { margin:0; background:var(--nc-bg); color:var(--nc-body); font-family:var(--nc-font); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
.nc h1, .nc h2, .nc h3 { color:var(--nc-ink); margin:0; text-wrap:balance; }
.nc a { text-decoration:none; }
.nc a:not(.nc-btn):not(.nc-iconbtn) { color:inherit; }   /* ボタン系アンカーは各variantの文字色を保持 */
.nc-num { font-variant-numeric: tabular-nums; }
.nc-muted { color:var(--nc-muted); }

/* ---------- top bar / nav ---------- */
.nc-topbar { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--nc-line); }
.nc-topbar-in { max-width:1240px; margin:0 auto; padding:0 20px; height:58px; display:flex; align-items:center; gap:22px; }
.nc-brand { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--nc-ink); letter-spacing:.02em; white-space:nowrap; }
.nc-brand .nc-mark { width:30px; height:30px; border-radius:10px; background:var(--nc-accent-50); border:1px solid var(--nc-accent-100); display:grid; place-items:center; font-size:18px; line-height:1; }
.nc-nav { display:flex; gap:2px; align-items:center; }
.nc-nav > a, .nc-nav > .nc-dd > a { padding:8px 12px; border-radius:8px; color:var(--nc-body); font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.nc-nav > a:hover, .nc-nav > .nc-dd > a:hover { background:var(--nc-accent-50); color:var(--nc-accent-ink); }
.nc-nav a.nc-active { color:var(--nc-accent-ink); background:var(--nc-accent-100); }
.nc-chev { font-size:10px; opacity:.6; }
.nc-spacer { flex:1; }
.nc-user { display:flex; align-items:center; gap:9px; color:var(--nc-body); font-weight:600; font-size:13px; white-space:nowrap; }
.nc-avatar { width:30px; height:30px; border-radius:50%; background:#e2eeeb; color:var(--nc-accent-ink); display:grid; place-items:center; font-weight:800; font-size:13px; }
.nc-signout { color:var(--nc-muted); font-weight:600; font-size:13px; background:none; border:none; cursor:pointer; font-family:inherit; padding:6px 8px; border-radius:7px; }
.nc-signout:hover { color:var(--nc-danger); background:var(--nc-danger-bg); }

/* dropdown */
.nc-dd { position:relative; }
.nc-dd-menu { position:absolute; top:calc(100% + 7px); left:0; min-width:200px; background:#fff; border:1px solid var(--nc-line); border-radius:10px; box-shadow:var(--nc-shadow); padding:6px; display:none; }
/* トリガーとメニューの隙間を埋める透明ブリッジ（ホバーが途切れないように） */
.nc-dd-menu::before { content:''; position:absolute; left:0; right:0; top:-9px; height:9px; }
.nc-dd:hover .nc-dd-menu, .nc-dd:focus-within .nc-dd-menu { display:block; }
.nc-dd-menu a { display:block; padding:8px 11px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--nc-body); }
.nc-dd-menu a:hover { background:var(--nc-accent-50); color:var(--nc-accent-ink); }

/* mobile menu toggle */
.nc-burger { display:none; margin-left:auto; background:none; border:1px solid var(--nc-line-strong); border-radius:8px; width:38px; height:34px; cursor:pointer; color:var(--nc-body); }
.nc-mobile { display:none; padding:8px 14px 14px; border-top:1px solid var(--nc-line); background:#fff; }
.nc-mobile a { display:block; padding:9px 10px; border-radius:8px; font-weight:600; font-size:14px; color:var(--nc-body); }
.nc-mobile a:hover { background:var(--nc-accent-50); color:var(--nc-accent-ink); }

/* ---------- page shell ---------- */
.nc-page { max-width:1240px; margin:0 auto; padding:24px 20px 60px; }
/* 一覧系ページは画面幅を広く使う（wide / xwide は同幅。列数の多い一覧向け） */
.nc-page.wide { max-width:min(2400px, 98vw); }
.nc-page.xwide { max-width:min(2400px, 98vw); }
.nc-crumbs { color:var(--nc-muted); font-size:12.5px; font-weight:600; letter-spacing:.02em; margin-bottom:5px; }
.nc-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.nc-page-head .nc-title { font-size:22px; font-weight:800; }
.nc-page-head .nc-sub { color:var(--nc-muted); font-size:13px; margin-top:3px; }

/* stat chips */
.nc-stats { display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.nc-stat { background:var(--nc-surface); border:1px solid var(--nc-line); border-radius:var(--nc-radius); padding:12px 16px; min-width:150px; box-shadow:var(--nc-shadow); }
.nc-stat .k { color:var(--nc-muted); font-size:12px; font-weight:700; letter-spacing:.03em; }
.nc-stat .v { color:var(--nc-ink); font-size:24px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; }
.nc-stat .v small { font-size:13px; font-weight:700; color:var(--nc-muted); }
.nc-stat.accent { border-color:var(--nc-accent-100); background:linear-gradient(180deg,var(--nc-accent-50),#fff); }
.nc-stat.accent .v { color:var(--nc-accent-ink); }

/* ---------- card ---------- */
.nc-card { background:var(--nc-surface); border:1px solid var(--nc-line); border-radius:var(--nc-radius); box-shadow:var(--nc-shadow); overflow:hidden; }
.nc-card + .nc-card { margin-top:16px; }
.nc-toolbar { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--nc-line); flex-wrap:wrap; }
.nc-search { display:flex; align-items:center; gap:8px; background:var(--nc-surface-2); border:1px solid var(--nc-line-strong); border-radius:9px; padding:8px 12px; min-width:240px; flex:1; max-width:380px; }
.nc-search input { border:none; background:transparent; outline:none; font-size:14px; width:100%; color:var(--nc-ink); font-family:inherit; }
.nc-search svg { color:var(--nc-muted); flex-shrink:0; }
.nc-count { color:var(--nc-muted); font-size:13px; font-weight:600; white-space:nowrap; }
.nc-card-pad { padding:16px; }

/* ---------- buttons ---------- */
.nc-btn { border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:13.5px; border-radius:9px; padding:9px 15px; display:inline-flex; align-items:center; gap:7px; text-decoration:none; line-height:1.2; white-space:nowrap; }
.nc-btn-primary { background:var(--nc-accent); color:#fff; box-shadow:0 2px 6px rgba(13,148,136,.28); }
.nc-btn-primary:hover { background:var(--nc-accent-dk); color:#fff; }
.nc-btn-ghost { background:var(--nc-surface-2); color:var(--nc-body); border:1px solid var(--nc-line-strong); }
.nc-btn-ghost:hover { background:#eef4f2; }
.nc-btn-amber { background:#b45309; color:#fff; }
.nc-btn-amber:hover { background:#92400e; color:#fff; }
.nc-btn-violet { background:#7c3aed; color:#fff; }
.nc-btn-violet:hover { background:#6d28d9; color:#fff; }
.nc-btn-danger { background:var(--nc-danger); color:#fff; }
.nc-btn-danger:hover { background:#a52c22; color:#fff; }
.nc-btn-blue { background:#0369a1; color:#fff; }
.nc-btn-blue:hover { background:#075985; color:#fff; }
.nc-btn[disabled], .nc-btn:disabled { opacity:.55; cursor:default; }
.nc-btn-sm { padding:6px 11px; font-size:12.5px; border-radius:8px; }

/* ---------- table ---------- */
.nc-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.nc-tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.nc-tbl thead th { text-align:left; color:var(--nc-muted); font-weight:700; font-size:11.5px; letter-spacing:.04em; padding:11px 14px; background:var(--nc-surface-2); border-bottom:1px solid var(--nc-line-strong); white-space:nowrap; }
.nc-tbl thead th.r, .nc-tbl tbody td.r { text-align:right; }
.nc-tbl thead th.c, .nc-tbl tbody td.c { text-align:center; }
.nc-tbl tbody td { padding:11px 14px; border-bottom:1px solid var(--nc-line); color:var(--nc-body); white-space:nowrap; vertical-align:middle; }
.nc-tbl tbody tr:nth-child(even) td { background:var(--nc-surface-2); }
.nc-tbl tbody tr:hover td { background:var(--nc-accent-50); }
.nc-tbl tbody td.strong { color:var(--nc-ink); font-weight:700; }
.nc-tbl tbody tr:last-child td { border-bottom:none; }
.nc-tbl .num { font-variant-numeric:tabular-nums; }
/* section heading row (e.g. maker grouping) */
.nc-tbl tr.nc-group td { background:var(--nc-ink); color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.02em; }

/* ---------- chips / badges ---------- */
.nc-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.4; }
.nc-chip.teal   { background:var(--nc-accent-100); color:var(--nc-accent-ink); }
.nc-chip.zero   { background:#eef2f1; color:var(--nc-muted); }
.nc-chip.warn   { background:var(--nc-warn-bg); color:var(--nc-warn); }
.nc-chip.danger { background:var(--nc-danger-bg); color:var(--nc-danger); }
.nc-chip.ok     { background:var(--nc-ok-bg); color:var(--nc-ok); }

/* ---------- icon buttons / row actions ---------- */
.nc-act { display:inline-flex; gap:4px; }
.nc-iconbtn { width:30px; height:30px; border-radius:8px; display:inline-grid; place-items:center; color:var(--nc-muted); border:1px solid transparent; cursor:pointer; background:none; text-decoration:none; }
.nc-iconbtn:hover { background:#fff; border-color:var(--nc-line-strong); color:var(--nc-accent-ink); }
.nc-iconbtn.danger:hover { color:var(--nc-danger); border-color:#f0c9c5; background:#fff; }

/* ---------- pagination ---------- */
.nc-pager { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-top:1px solid var(--nc-line); color:var(--nc-muted); font-size:13px; flex-wrap:wrap; gap:10px; }
.nc-pgnav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.nc-pg { min-width:32px; height:32px; padding:0 9px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--nc-line-strong); background:#fff; color:var(--nc-body); font-weight:700; font-size:13px; font-family:inherit; cursor:pointer; }
.nc-pg:hover { background:var(--nc-accent-50); color:var(--nc-accent-ink); border-color:var(--nc-accent-100); }
.nc-pg.active { background:var(--nc-accent); color:#fff; border-color:var(--nc-accent); cursor:default; }
.nc-pg.disabled { opacity:.4; cursor:default; }
.nc-pg.dots { border:none; background:none; min-width:auto; padding:0 4px; color:var(--nc-muted); }

/* ---------- alerts / flash ---------- */
.nc-alert { padding:10px 14px; border-radius:9px; margin-bottom:14px; font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:10px; }
.nc-alert.info   { background:var(--nc-accent-50); border:1px solid var(--nc-accent-100); color:var(--nc-accent-ink); }
.nc-alert.ok     { background:var(--nc-ok-bg); border:1px solid #bfe3cb; color:var(--nc-ok); }
.nc-alert.warn   { background:var(--nc-warn-bg); border:1px solid #f3ddb8; color:var(--nc-warn); }
.nc-alert .nc-close { margin-left:auto; color:inherit; text-decoration:underline; font-weight:600; cursor:pointer; opacity:.8; }

/* ---------- forms ---------- */
.nc-form { display:grid; gap:16px; max-width:560px; }
.nc-field { display:grid; gap:6px; }
.nc-field label { font-size:12.5px; font-weight:700; color:var(--nc-ink); letter-spacing:.02em; }
.nc-input, .nc-select { width:100%; padding:9px 12px; border:1px solid var(--nc-line-strong); border-radius:9px; font-size:14px; font-family:inherit; color:var(--nc-ink); background:#fff; outline:none; }
.nc-input:focus, .nc-select:focus { border-color:var(--nc-accent); box-shadow:0 0 0 3px var(--nc-accent-50); }
/* number入力のスピナー(上下ボタン)を非表示 */
.nc-input[type=number]::-webkit-outer-spin-button,
.nc-input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.nc-input[type=number] { -moz-appearance:textfield; appearance:textfield; }
/* コピーボタン（ASIN/SKU/注文番号/品番などの隣に置く小さなボタン） */
.nc-copybtn { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; margin-left:4px; border:1px solid var(--nc-line-strong); border-radius:5px; background:#fff; color:var(--nc-muted); cursor:pointer; font-size:11px; line-height:1; vertical-align:middle; }
.nc-copybtn:hover { background:var(--nc-surface-2); color:var(--nc-ink); border-color:var(--nc-accent); }
/* ---------- 印刷（A4） ---------- */
.print-only { display:none; }
@media print {
  @page { size:A4; margin:10mm; }
  .nc-topbar, .nc-crumbs, .nc-btn, .nc-iconbtn, .nc-pager, .no-print { display:none !important; }
  .print-only { display:block; }
  .print-break { break-before:page; }
  body.nc { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body.nc, .nc-page { background:#fff !important; }
  .nc-page { max-width:none !important; width:auto !important; padding:0 !important; margin:0 !important; }
  .nc-page-head { margin-bottom:8px !important; }
  .nc-card { box-shadow:none !important; border:1px solid #bbb !important; break-inside:avoid; margin-bottom:8px !important; }
  .nc-toolbar { padding:6px 10px !important; }
  .nc-tbl-wrap { overflow:visible !important; }
  .nc-tbl { font-size:10.5px; }
  .nc-tbl th, .nc-tbl td { padding:3px 8px !important; }
  .nc-stat { box-shadow:none !important; border:1px solid #ddd !important; }
  a { color:#000 !important; text-decoration:none !important; }
  h1.nc-title { font-size:1.2rem; }
  .nc-sub { font-size:11px; }
  /* グラフを印刷ページ幅に収める（画面幅のまま溢れるのを防ぐ） */
  .chart-box { height:auto !important; }
  .chart-box canvas { max-width:100% !important; width:100% !important; height:auto !important; }
  /* 列の多い表を用紙幅に収める（詰めて折り返さない） */
  .print-compact { font-size:8.5px !important; }
  .print-compact th, .print-compact td { padding:2px 4px !important; white-space:nowrap; }
}

/* ---------- modal ---------- */
.nc-modal { position:fixed; inset:0; z-index:60; background:rgba(16,49,46,.45); display:grid; place-items:start center; padding-top:10vh; }
.nc-modal-box { background:#fff; width:92%; max-width:28rem; border-radius:14px; box-shadow:0 20px 50px rgba(16,49,46,.3); padding:22px 22px 20px; }
.nc-modal-box h3 { font-size:1.05rem; font-weight:800; margin-bottom:14px; }
.nc-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* ---------- misc ---------- */
.nc-empty { background:#fff; border:1px solid var(--nc-line); padding:26px; border-radius:var(--nc-radius); color:var(--nc-muted); box-shadow:var(--nc-shadow); }
.nc-loading { color:var(--nc-accent-ink); font-size:.8rem; font-weight:700; }
/* ボタン内などのスピナー（currentColorで文字色に追従） */
.nc-spin { display:inline-block; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:nc-rot .6s linear infinite; vertical-align:-1px; margin-right:4px; }
@keyframes nc-rot { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nc-spin { animation:none; } }

/* focus visibility for keyboard users */
.nc a:focus-visible, .nc button:focus-visible, .nc input:focus-visible, .nc select:focus-visible { outline:2px solid var(--nc-accent); outline-offset:2px; }

@media (max-width:820px){
  .nc-nav, .nc-user .nc-name { display:none; }
  .nc-burger { display:inline-grid; place-items:center; }
  .nc-mobile.nc-open { display:block; }
  .nc-page-head { align-items:flex-start; }
  .nc-search { max-width:none; }
}