/* Lighting Fixture List - styles scoped under #lfl-app */
#lfl-app, #lfl-app * { box-sizing: border-box; }
#lfl-app { font-family: "Yu Gothic","Meiryo",sans-serif; background:#f4f6f8; color:#333; padding:16px; }
#lfl-app h1 { font-size:20px; margin:0 0 12px; padding-bottom:8px; border-bottom:3px solid #2c7be5; color:#333; }
#lfl-app .container { display:grid; grid-template-columns:400px 1fr; gap:16px; max-width:100%; margin:0 auto; }
#lfl-app .app-header { max-width:100%; margin:0 auto 16px; }
#lfl-app .panel { background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:16px; }
#lfl-app .panel h2 { font-size:14px; margin:0 0 12px; color:#2c7be5; display:flex; justify-content:space-between; align-items:center; }

#lfl-app .project-panel { grid-column:1/-1; background:linear-gradient(to right,#2c7be5,#1a68d1); color:#fff; border-radius:6px; padding:14px 18px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
#lfl-app .project-panel h2 { margin:0 0 10px; font-size:14px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
#lfl-app .project-switcher { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#lfl-app .project-switcher select { padding:5px 8px; border-radius:3px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.95); font-size:13px; min-width:180px; color:#333; }
#lfl-app .project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
#lfl-app .project-grid label { display:block; font-size:11px; font-weight:bold; margin-bottom:2px; opacity:0.9; color:#fff; }
#lfl-app .project-grid input { width:100%; padding:5px 7px; border:1px solid rgba(255,255,255,0.3); border-radius:3px; font-size:13px; background:rgba(255,255,255,0.95); color:#333; font-family:inherit; }
#lfl-app .project-header-print { display:none; }

#lfl-app .field { margin-bottom:10px; }
#lfl-app .field label { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:bold; margin-bottom:3px; color:#333; }
#lfl-app .field label .add-master { font-size:11px; font-weight:normal; color:#2c7be5; cursor:pointer; text-decoration:underline; }
#lfl-app .field input, #lfl-app .field select, #lfl-app .field textarea { width:100%; padding:7px 9px; font-size:14px; border:1.5px solid #d6dce3; border-radius:4px; font-family:inherit; transition:border-color 0.15s; background:#fff; color:#333; }
#lfl-app .field input:focus, #lfl-app .field select:focus, #lfl-app .field textarea:focus { outline:none; border-color:#2c7be5; box-shadow:0 0 0 3px rgba(44,123,229,0.15); }
#lfl-app .field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#lfl-app .price-wrap { position:relative; }
#lfl-app .price-wrap::before { content:"¥"; position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#666; font-size:13px; pointer-events:none; }
#lfl-app .price-wrap input { padding-left:22px; }

#lfl-app .qty-stepper { display:flex; }
#lfl-app .qty-stepper input { text-align:center; border-radius:0; border-left:none; border-right:none; }
#lfl-app .qty-stepper button { width:32px; background:#f0f4f8; border:1.5px solid #d6dce3; cursor:pointer; font-size:16px; font-weight:bold; color:#2c7be5; }
#lfl-app .qty-stepper button:hover { background:#e0e8f0; }
#lfl-app .qty-stepper button:first-child { border-radius:4px 0 0 4px; }
#lfl-app .qty-stepper button:last-child { border-radius:0 4px 4px 0; }

#lfl-app .combobox { position:relative; display:flex; }
#lfl-app .combobox input { flex:1; border-radius:4px 0 0 4px; }
#lfl-app .combobox .master-btn { width:36px; background:#f0f4f8; border:1.5px solid #d6dce3; border-left:none; border-radius:0 4px 4px 0; cursor:pointer; font-size:14px; }
#lfl-app .combobox .master-btn:hover { background:#e0e8f0; }

#lfl-app .img-field { display:flex; gap:10px; align-items:flex-start; }
#lfl-app .img-preview { width:80px; height:80px; border:1.5px dashed #d6dce3; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#bbb; font-size:11px; background:#fafbfc; overflow:hidden; flex-shrink:0; }
#lfl-app .img-preview img { max-width:100%; max-height:100%; object-fit:contain; }
#lfl-app .img-controls { flex:1; }
#lfl-app .img-controls input[type="file"] { width:100%; font-size:12px; }
#lfl-app .img-thumb { width:32px; height:32px; object-fit:cover; cursor:pointer; border-radius:3px; border:1px solid #ddd; }

#lfl-app .btn { padding:9px 14px; font-size:14px; border:none; border-radius:4px; cursor:pointer; font-weight:bold; line-height:normal; text-decoration:none; display:inline-block; }
#lfl-app .btn-primary { background:#2c7be5; color:#fff; } #lfl-app .btn-primary:hover { background:#1a68d1; }
#lfl-app .btn-secondary { background:#6c757d; color:#fff; } #lfl-app .btn-secondary:hover { background:#5a6268; }
#lfl-app .btn-success { background:#28a745; color:#fff; } #lfl-app .btn-success:hover { background:#218838; }
#lfl-app .btn-warning { background:#f39c12; color:#fff; } #lfl-app .btn-warning:hover { background:#e08e0b; }
#lfl-app .btn-danger { background:#e74c3c; color:#fff; padding:4px 8px; font-size:12px; }
#lfl-app .btn-edit { background:#f39c12; color:#fff; padding:4px 8px; font-size:12px; }
#lfl-app .btn-dup { background:#17a2b8; color:#fff; padding:4px 8px; font-size:12px; }
#lfl-app .btn-row { display:flex; gap:8px; margin-top:10px; }
#lfl-app .btn-mini { font-size:11px; padding:3px 8px; background:#fff; color:#2c7be5; border:1px solid #2c7be5; cursor:pointer; border-radius:3px; }
#lfl-app .btn-mini:hover { background:#e7f0ff; }
#lfl-app .btn-mini-light { font-size:11px; padding:3px 8px; background:rgba(255,255,255,0.2); color:#fff; border:1px solid rgba(255,255,255,0.5); cursor:pointer; border-radius:3px; }
#lfl-app .btn-mini-light:hover { background:rgba(255,255,255,0.3); }

#lfl-app .continuous-mode { display:flex; align-items:center; gap:6px; font-size:12px; color:#555; background:#fffbe6; padding:6px 10px; border-radius:4px; margin-top:10px; border:1px solid #ffe58f; }
#lfl-app .continuous-mode input { width:auto; margin:0; }

#lfl-app .toolbar { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; align-items:center; }
#lfl-app .toolbar .search { flex:1; min-width:180px; padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px; }
#lfl-app .toolbar .btn { padding:8px 12px; font-size:13px; }
#lfl-app table { width:100%; border-collapse:collapse; font-size:13px; background:transparent; }
#lfl-app th, #lfl-app td { padding:7px 10px; text-align:left; border-bottom:1px solid #e6e9ec; white-space:nowrap; color:#333; }
#lfl-app th { background:#f8f9fa; font-weight:bold; position:sticky; top:0; border-bottom:2px solid #ccc; cursor:pointer; user-select:none; z-index:1; }
#lfl-app th:hover { background:#e9ecef; }
#lfl-app th .sort-ind { color:#2c7be5; margin-left:4px; font-size:11px; }
#lfl-app tbody tr:hover { background:#f8fbff; }
#lfl-app td.num { text-align:right; }
#lfl-app .table-wrap { max-height:500px; overflow:auto; border:1px solid #e6e9ec; border-radius:4px; }
#lfl-app .empty { text-align:center; padding:40px; color:#999; }
#lfl-app .count { font-size:13px; color:#666; }

#lfl-app .toast { position:fixed; top:20px; right:20px; background:#28a745; color:#fff; padding:12px 20px; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.2); opacity:0; transition:opacity 0.3s; pointer-events:none; z-index:99999; }
#lfl-app .toast.show { opacity:1; }
#lfl-app .toast.error { background:#e74c3c; }
#lfl-app .edit-mode { background:#fff3cd !important; }
#lfl-app .edit-banner { background:#fff3cd; border:1px solid #f39c12; color:#856404; padding:6px 10px; border-radius:4px; font-size:12px; margin-bottom:10px; display:none; }
#lfl-app .edit-banner.show { display:block; }

#lfl-app .tabs { display:flex; gap:2px; margin-bottom:10px; border-bottom:2px solid #e6e9ec; }
#lfl-app .tab { padding:8px 14px; cursor:pointer; border:none; background:none; font-size:13px; font-weight:bold; color:#666; border-bottom:3px solid transparent; margin-bottom:-2px; }
#lfl-app .tab.active { color:#2c7be5; border-bottom-color:#2c7be5; }
#lfl-app .tab-content { display:none; }
#lfl-app .tab-content.active { display:block; }

#lfl-app .summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
#lfl-app .summary-card { background:#f8f9fa; border-radius:6px; padding:12px; border-left:4px solid #2c7be5; }
#lfl-app .summary-card h3 { font-size:12px; margin:0 0 6px; color:#2c7be5; }
#lfl-app .summary-stat { font-size:22px; font-weight:bold; color:#333; }
#lfl-app .summary-label { font-size:12px; color:#666; }
#lfl-app .summary-table { width:100%; font-size:13px; }
#lfl-app .summary-table th { position:static; cursor:default; }

#lfl-app .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99998; justify-content:center; align-items:center; }
#lfl-app .modal-bg.show { display:flex; }
#lfl-app .modal { background:#fff; padding:22px; border-radius:8px; max-width:720px; width:92%; max-height:88vh; overflow:auto; color:#333; }
#lfl-app .modal-narrow { max-width:540px; }
#lfl-app .modal h2 { margin-top:0; color:#333; }
#lfl-app .modal-help { font-size:12px; color:#666; margin-bottom:12px; line-height:1.6; }
#lfl-app .col-row { display:grid; grid-template-columns:16px 1fr 60px 60px; align-items:center; gap:10px; padding:6px 8px; border:1px solid #e6e9ec; border-radius:4px; margin-bottom:4px; background:#fff; }
#lfl-app .col-row .grip { cursor:move; color:#999; text-align:center; }
#lfl-app .col-row input[type="text"] { padding:4px 8px; border:1px solid #ccc; border-radius:3px; font-size:13px; }
#lfl-app .col-row .toggle { display:flex; flex-direction:column; align-items:center; font-size:10px; color:#666; }
#lfl-app .col-row.dragging { opacity:0.4; }
#lfl-app .col-row-header { display:grid; grid-template-columns:16px 1fr 60px 60px; gap:10px; padding:4px 8px; font-size:11px; font-weight:bold; color:#666; text-align:center; }
#lfl-app .col-row-header > :nth-child(2) { text-align:left; }

#lfl-app .master-list { max-height:300px; overflow:auto; margin:10px 0; }
#lfl-app .master-item { display:flex; gap:8px; padding:4px 0; align-items:center; }
#lfl-app .master-item input { flex:1; padding:5px 8px; border:1px solid #ccc; border-radius:3px; font-size:13px; }
#lfl-app .master-add { display:flex; gap:6px; margin-top:8px; }
#lfl-app .master-add input { flex:1; padding:7px 9px; border:1.5px solid #d6dce3; border-radius:4px; }

#lfl-app .col-toggle-wrap { position:relative; display:inline-block; }
#lfl-app .col-toggle-menu { display:none; position:absolute; top:100%; left:0; margin-top:4px; background:#fff; border:1px solid #d6dce3; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.15); padding:8px; z-index:100; min-width:220px; }
#lfl-app .col-toggle-menu.show { display:block; }
#lfl-app .col-toggle-menu h4 { margin:4px 8px 6px; font-size:11px; color:#666; text-transform:uppercase; letter-spacing:0.5px; }
#lfl-app .col-toggle-item { display:flex; align-items:center; padding:5px 8px; cursor:pointer; border-radius:4px; font-size:13px; gap:8px; color:#333; }
#lfl-app .col-toggle-item:hover { background:#f0f4f8; }
#lfl-app .col-toggle-actions { display:flex; gap:6px; padding:6px 8px 4px; border-top:1px solid #e6e9ec; margin-top:6px; }
#lfl-app .col-toggle-actions button { flex:1; background:none; border:1px solid #d6dce3; border-radius:3px; padding:4px; font-size:11px; cursor:pointer; color:#555; }
#lfl-app .col-toggle-actions button:hover { background:#f0f4f8; }

#lfl-app .paste-area { width:100%; min-height:160px; padding:10px; border:1.5px solid #d6dce3; border-radius:4px; font-family:monospace; font-size:13px; }
#lfl-app .map-row { display:grid; grid-template-columns:1fr 30px 1fr; gap:8px; padding:4px 0; align-items:center; }
#lfl-app .map-row select { padding:6px; border:1px solid #ccc; border-radius:3px; }
#lfl-app .preview-table { font-size:12px; max-height:200px; overflow:auto; border:1px solid #e6e9ec; border-radius:4px; margin-top:10px; }

#lfl-app .app-title-bar { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:14px 20px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.08); margin-bottom:12px; flex-wrap:wrap; gap:8px; }
#lfl-app .app-title { font-size:18px; font-weight:bold; color:#2c7be5; margin:0; display:flex; align-items:center; gap:8px; padding:0; border:none; }
#lfl-app .app-title-actions { display:flex; gap:8px; }
#lfl-app .guide-panel { background:linear-gradient(135deg,#f0f7ff 0%,#e0ecff 100%); border:1px solid #b8d4f5; border-radius:6px; margin-bottom:12px; overflow:hidden; }
#lfl-app .guide-header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; cursor:pointer; user-select:none; background:rgba(255,255,255,0.5); }
#lfl-app .guide-header h3 { margin:0; font-size:14px; color:#1a68d1; display:flex; align-items:center; gap:8px; }
#lfl-app .guide-toggle { font-size:12px; color:#666; }
#lfl-app .guide-body { padding:14px 20px; display:none; }
#lfl-app .guide-panel.open .guide-body { display:block; }
#lfl-app .guide-panel.open .guide-toggle::before { content:'▲ '; }
#lfl-app .guide-panel:not(.open) .guide-toggle::before { content:'▼ '; }
#lfl-app .guide-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:12px; }
#lfl-app .guide-step { background:#fff; padding:12px; border-radius:5px; border-left:4px solid #2c7be5; font-size:13px; color:#333; }
#lfl-app .guide-step .step-no { display:inline-block; background:#2c7be5; color:#fff; width:22px; height:22px; border-radius:50%; text-align:center; line-height:22px; font-weight:bold; font-size:12px; margin-right:6px; }
#lfl-app .guide-step b { color:#1a68d1; }
#lfl-app .guide-step .step-desc { font-size:12px; color:#555; margin-top:4px; line-height:1.5; }
#lfl-app .guide-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; font-size:12px; }
#lfl-app .guide-feat { background:rgba(255,255,255,0.7); padding:6px 10px; border-radius:4px; display:flex; align-items:center; gap:6px; cursor:help; position:relative; transition: background 0.15s, transform 0.15s; color:#333; }
#lfl-app .guide-feat:hover { background:#fff; transform: translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.1); }
#lfl-app .guide-feat .feat-icon { font-size:16px; }
#lfl-app .guide-feat::after { content: attr(data-detail); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#1a2735; color:#fff; padding:10px 14px; border-radius:6px; font-size:12px; font-weight:normal; line-height:1.5; white-space:pre-line; width:280px; max-width:90vw; margin-bottom:10px; box-shadow:0 4px 12px rgba(0,0,0,0.25); opacity:0; visibility:hidden; transition:opacity 0.2s, visibility 0.2s; z-index:300; pointer-events:none; text-align:left; }
#lfl-app .guide-feat::before { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#1a2735; margin-bottom:-2px; z-index:300; opacity:0; visibility:hidden; transition:opacity 0.2s, visibility 0.2s; }
#lfl-app .guide-feat:hover::after, #lfl-app .guide-feat:hover::before { opacity:1; visibility:visible; }
#lfl-app .guide-feat .feat-title { font-weight:bold; }

#lfl-app .hint-icon { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:#b8d4f5; color:#1a68d1; font-size:10px; font-weight:bold; cursor:help; margin-left:4px; position:relative; }
#lfl-app .hint-icon:hover::after { content: attr(data-hint); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:6px 10px; border-radius:4px; font-size:12px; white-space:nowrap; z-index:200; margin-bottom:6px; font-weight:normal; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
#lfl-app .hint-icon:hover::before { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#333; z-index:200; }
#lfl-app .field-hint { font-size:11px; color:#666; margin-top:3px; padding:4px 8px; background:#f8fbff; border-radius:3px; border-left:2px solid #b8d4f5; display:none; }
#lfl-app .field:focus-within .field-hint { display:block; }
#lfl-app .field-hint.always { display:block; }

#lfl-app .progress-indicator { display:flex; gap:4px; margin-bottom:12px; padding:8px 10px; background:#f8fbff; border-radius:4px; font-size:11px; color:#666; }
#lfl-app .progress-step { flex:1; padding:4px 6px; border-radius:3px; background:#e6e9ec; text-align:center; transition: all 0.3s; }
#lfl-app .progress-step.done { background:#28a745; color:#fff; }
#lfl-app .progress-step.current { background:#2c7be5; color:#fff; font-weight:bold; }

#lfl-app .manual-content { font-size:13px; line-height:1.7; color:#333; }
#lfl-app .manual-content h3 { color:#2c7be5; border-bottom:2px solid #e6e9ec; padding-bottom:4px; margin-top:20px; font-size:15px; }
#lfl-app .manual-content h4 { color:#1a68d1; margin-top:14px; margin-bottom:6px; font-size:13px; }
#lfl-app .manual-content kbd { background:#f0f4f8; padding:2px 6px; border:1px solid #d6dce3; border-radius:3px; font-size:11px; font-family:monospace; box-shadow:0 1px 0 rgba(0,0,0,0.1); }
#lfl-app .manual-content code { background:#fff3cd; padding:1px 5px; border-radius:3px; font-size:12px; color:#856404; }
#lfl-app .manual-toc { background:#f8fbff; padding:10px 16px; border-radius:5px; margin-bottom:14px; font-size:13px; }
#lfl-app .manual-toc a { color:#2c7be5; text-decoration:none; margin-right:12px; display:inline-block; padding:2px 0; }
#lfl-app .manual-toc a:hover { text-decoration:underline; }

#lfl-app .img-modal { background:rgba(0,0,0,0.9); display:none; position:fixed; inset:0; z-index:99999; justify-content:center; align-items:center; }
#lfl-app .img-modal.show { display:flex; }
#lfl-app .img-modal img { max-width:90%; max-height:90%; }
#lfl-app .img-modal-close { position:absolute; top:20px; right:30px; color:#fff; font-size:36px; cursor:pointer; }

@media print {
  body * { visibility:hidden; }
  #lfl-app, #lfl-app * { visibility:visible; }
  #lfl-app { position:absolute; left:0; top:0; width:100%; background:#fff; padding:0; }
  #lfl-app .panel-input, #lfl-app .toolbar, #lfl-app .actions-col, #lfl-app .actions-cell, #lfl-app .tabs, #lfl-app .project-panel, #lfl-app .img-controls, #lfl-app .app-title-bar, #lfl-app .guide-panel { display:none !important; }
  #lfl-app .container { display:block; }
  #lfl-app .panel { box-shadow:none; padding:0; }
  #lfl-app .table-wrap { max-height:none; overflow:visible; border:none; }
  #lfl-app .tab-content { display:block !important; }
  #lfl-app th { background:#eee !important; -webkit-print-color-adjust:exact; cursor:default; }
  #lfl-app .project-header-print { display:block !important; border:1px solid #333; padding:10px; margin-bottom:12px; }
  #lfl-app .project-header-print table { width:100%; font-size:12px; }
  #lfl-app .project-header-print th, #lfl-app .project-header-print td { border:1px solid #999; padding:4px 8px; text-align:left; white-space:normal; }
  #lfl-app .project-header-print th { background:#f0f0f0 !important; width:110px; }
  #lfl-app .img-thumb { width:60px; height:60px; }
}