*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;
  padding-top: 50px; /* 固定ヘッダー分のスペースを確保 */
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 16px; /* 上下のpaddingを0に */
  background:#0a4d82;
  color:#fff;
  position: fixed; /* スクロールに追従するよう固定 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 他の要素より手前に表示 */
  height: 50px; /* 高さを固定 */
}
.topbar a{color:#fff;text-decoration:none;}
.container{max-width:1100px;margin:20px auto;padding:0 12px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:16px;}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;border:1px solid #0a4d82;background:#0a4d82;color:#fff;text-decoration:none}
.btn.secondary{background:#fff;color:#0a4d82}
.input, select{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:8px; min-width: 80px;}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e5e7eb;padding:8px;text-align:left; white-space: nowrap;}
.footer{padding:16px;text-align:center;color:#64748b}
.login{max-width:420px;margin:40px auto}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#1d4ed8;font-size:12px}

/* Orders New Page Layout - FINAL */
.o-wrapper { display: flex; flex-direction: column; gap: 16px; }
.o-page-header { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; margin-bottom: 16px; }
.o-page-header-left { display: flex; align-items: center; gap: 8px; }
.o-page-header-right { display: flex; gap: 8px; }
.o-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px;}
.o-card-header h2, .o-card-header h3 { margin: 0; }
.o-card-actions { display: flex; gap: 8px; }
.form-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px 24px; }
.form-section { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; align-items: center; }
.form-section-title { grid-column: 1 / -1; font-weight: bold; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; margin-bottom: 8px; }
.form-section label { text-align: right; color: #4b5563; font-size: 13px; }
.form-section span { font-size: 14px; padding-left: 8px; }
.form-input-group { display: flex; gap: 8px; }
.form-input-group select { flex-shrink: 1; }
.form-input-group input { flex-grow: 1; }
.o-grid { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: 16px; align-items: stretch; }
.o-card-full { width: 100%; display: flex; flex-direction: column; }
.o-attachment-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 12px; max-height: 200px; overflow-y: auto; }
.o-attachment-thumb img { width: 100%; height: auto; border-radius: 8px; border: 1px solid #e5e7eb; }
.o-file-dropzone { text-align: center; padding: 24px; color: #94a3b8; border: 2px dashed #e5e7eb; border-radius: 8px; cursor: pointer; flex-grow: 1; display:flex; align-items: center; justify-content: center; }
.o-pdf-preview { flex-grow: 1; min-height: 350px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.o-pdf-preview iframe { width: 100%; height: 100%; border: 0; }
.o-pdf-placeholder { text-align: center; padding: 40px; color: #94a3b8; border: 2px dashed #e5e7eb; border-radius: 8px; flex-grow: 1; display: flex; align-items: center; justify-content: center; min-height: 350px;}
.o-details-wrapper { }
.o-table-container { overflow-x: auto; }
.table tfoot td { background-color: #f8fafc; text-align: right; font-weight: bold; }
.o-totals-label { text-align: right; }
.o-totals-value { text-align: right; }
.table .details-add-row td { padding: 4px; vertical-align: middle; }
.table .details-add-row input, .table .details-add-row select { height: 32px; font-size: 13px; }
.cm-mini{padding:4px 8px;font-size:12px}
@media (max-width:1400px){ .o-grid { grid-template-columns: 1fr; } }
.btn.danger { background-color: #dc2626; border-color: #b91c1c; color: #fff; }
.btn.danger:hover { background-color: #b91c1c; }
.table tr.status-cancelled { background-color: #fee2e2; text-decoration: line-through; color: #9ca3af; }
.table tr.status-locked { background-color: #f1f5f9; color: #64748b; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; text-transform: capitalize; }
.badge-draft { background-color: #e0e7ff; color: #4338ca; }
.badge-confirmed { background-color: #d1fae5; color: #065f46; }
.badge-cancelled { background-color: #fee2e2; color: #991b1b; }
.badge-locked { background-color: #e5e7eb; color: #4b5563; }
.badge-billed { background-color: #fef9c3; color: #854d0e; }
.badge-closed { background-color: #ede9fe; color: #5b21b6; }
.table tr.status-cancelled { background-color: #fff1f2; text-decoration: line-through; color: #9ca3af; }
.table tr.status-locked { background-color: #fefce8; color: #64748b; }
.status-banner { padding: 12px 16px; margin-bottom: 16px; border-radius: 8px; font-weight: 500; text-align: center; border: 1px solid; }
.status-banner.status-locked { background-color: #fef9c3; color: #713f12; border-color: #fde047; }
.status-banner.status-cancelled { background-color: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.excel-like-table th, .excel-like-table td { padding: 2px 6px; vertical-align: middle; font-size: 14px; }
.excel-like-table .input, .excel-like-table select { height: 28px; padding: 2px 6px; font-size: 14px; border-radius: 4px; }
.excel-like-table .btn { padding: 2px 6px; font-size: 12px; }

/* --- Dropdown Menu Styles --- */
.main-nav { display: flex; align-items: center; height: 100%; }
.nav-menu { list-style: none; padding: 0; margin: 0; display: flex; height: 100%; }
.nav-item { position: relative; height: 100%; }
.nav-item a { padding: 0 16px; display: flex; align-items: center; height: 100%; }
.nav-item.has-dropdown > a::after { content: ' ▼'; font-size: 0.7em; margin-left: 5px; }
.nav-item:hover { background-color: #1e6091; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #0a4d82; list-style: none; padding: 0; margin: 0; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1000; }
.nav-item:hover .dropdown-menu { display: block; }
.dropdown-menu li a { padding: 12px 16px; white-space: nowrap; }
.dropdown-menu li a:hover { background-color: #1e6091; }
.topbar nav a { margin-right: 0; }
.topbar .brand a { margin-right: 12px; }

/* --- 横幅いっぱいに表示するためのコンテナ --- */
.container-fluid {
    width: 100%;
    margin: 20px 0;
    padding: 0 20px; /* 左右に少し余白を持たせる */
}

/* --- 受注統計ページ用のスタイル（修正） --- */
.stats-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    height: calc(100vh - 110px);
}

.stats-table-card {
    flex: 0 0 50%; /* テーブルの幅を50%に設定 */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-chart-card {
    flex: 1 1 50%; /* チャートの幅を50%に設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.stats-table-container {
    flex-grow: 1;
    overflow-y: auto;
}


/* --- Attachment Gallery Styles (Common) --- */
.o-attachment-gallery {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    flex-grow: 1;
    min-height: 360px;
    overflow-y: auto;
}
.view-toggle.active { background: #e5e7eb; color: #111827; border-color: #d1d5db; }

/* Grid (Thumbnail) View */
.o-attachment-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.o-attachment-gallery .o-attachment-item {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    font-size: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.o-attachment-gallery .o-attachment-item a:first-of-type {
    display: block;
    height: 100px;
    flex-shrink: 0;
}
.o-attachment-gallery .o-attachment-item img,
.o-attachment-gallery .o-attachment-item .doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f3f4f6;
    font-size: 32px;
    color: #6b7280;
}
.o-attachment-gallery .o-attachment-details {
    padding: 6px 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
 .o-attachment-details strong { display: block; color: #111827; }
 .o-attachment-details span, .o-attachment-details .filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.o-attachment-details .filename { font-size: 10px; margin-top: 4px; }

/* List View */
.o-attachment-gallery.list-view {
    grid-template-columns: 1fr;
}
.o-attachment-gallery.list-view .o-attachment-item {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px;
    min-height: 56px;
}
.o-attachment-gallery.list-view .o-attachment-item a:first-of-type {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}
.o-attachment-gallery.list-view .o-attachment-details {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 10px;
    padding: 0;
    min-width: 0; /* Important for text ellipsis */
}
.o-attachment-gallery.list-view .o-attachment-details strong { grid-column: 1 / 2; grid-row: 1 / 2; }
.o-attachment-gallery.list-view .o-attachment-details span { grid-column: 2 / 3; grid-row: 1 / 2; text-align: right; }
.o-attachment-gallery.list-view .o-attachment-details .filename { grid-column: 1 / 3; grid-row: 2 / 3; margin-top: 0; }

.o-attachment-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s;
}
.o-attachment-item:hover .o-attachment-delete-btn {
    opacity: 1;
}