/* =======================================================================
   DRAFT EDITOR — THEME + LAYOUT + UI POLISH
   (v3: bolder search icon)
   ======================================================================= */

/* Make the outer wrapper full-width ONLY when it contains the editor */
main.wrap:has(> .draft-editor-page) {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 10px !important; /* small breathing room */
}

/* Root palette for the editor (admin only — customer theme overrides via body.theme-customer) */
.draft-editor-page {
  --panel:#0e1729;
  --brand:#2563eb; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --chip:#0b1527; --chipBorder:#233253;
}

/* -------- Layout ------------------------------------------------------ */
.draft-editor-page .layout{
  display:grid;
  grid-template-columns:320px 1fr; /* sidebar + main */
  gap:14px;
  width:100%;
  align-items:start;
}

.draft-editor-page .sidebar{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  color:var(--ink);
  position:sticky;
  top:16px;
  height:fit-content;
}
.draft-editor-page .sidebar h3{margin:0 0 10px;font-size:1rem;color:#cfe0ff}

.draft-editor-page .tree{list-style:none;padding-left:0;margin:0}
.draft-editor-page .tree .cat{margin:6px 0}
.draft-editor-page .tree .cat > .row{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;background:#0b1527;border:1px solid #1b2540;border-radius:10px;padding:8px 10px}
.draft-editor-page .tree .cat.active > .row{border-color:#3b82f6;background:#112147}
.draft-editor-page .tree .items{margin:6px 0 6px 14px;border-left:2px dashed #24304d;padding-left:10px}
.draft-editor-page .tree .item{margin:4px 0}
.draft-editor-page .tree .item > .row{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;padding:6px 8px;border-radius:8px}
.draft-editor-page .tree .item.active > .row{background:#0b1527}
.draft-editor-page .tree .sizes{margin:4px 0 4px 16px}
.draft-editor-page .size-pill{display:inline-flex;gap:8px;align-items:center;padding:2px 8px;border-radius:999px;border:1px solid #334155;background:#0b1527;color:#e8eefc;font-size:.82rem;margin:2px 4px 2px 0;cursor:pointer}
.draft-editor-page .size-pill:hover{background:#112147}
.draft-editor-page .count{opacity:.9;font-weight:700}
.draft-editor-page .helper{font-size:.85rem;color:var(--muted)}
/* Day 116 — collapsible + drag-reorder outline */
.draft-editor-page .tree .cat > .row .cat-toggle{margin-left:auto;opacity:.5;font-size:.75rem;transition:transform .15s;user-select:none}
.draft-editor-page .tree .cat.collapsed > .row .cat-toggle{transform:rotate(-90deg)}
.draft-editor-page .tree .cat.collapsed > ul.items{display:none}
.draft-editor-page .tree .cat[draggable="true"]{cursor:grab}
.draft-editor-page .tree .cat.drag-over > .row{border-color:#60a5fa;background:#172549}
.draft-editor-page .tree .cat-mg-badge{display:inline-flex;align-items:center;padding:1px 5px;border-radius:999px;background:rgba(99,102,241,.18);color:#a5b4fc;border:1px solid rgba(99,102,241,.35);font-size:.7rem;font-weight:600;margin-left:4px}
.draft-editor-page .cat-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}

.draft-editor-page .draft-editor{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  width:100%;
}

/* -------- Header / Infobar ------------------------------------------- */
.draft-editor-page .page-header{margin-bottom:8px}
.draft-editor-page .infobar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 6px;
}
.draft-editor-page .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:var(--chip); border:1px solid var(--chipBorder);
  color:var(--ink); font-size:.85rem; line-height:1;
}
.draft-editor-page .chip .label{opacity:.8}
.draft-editor-page .chip .value{font-weight:700}
.draft-editor-page .status-pill{display:inline-block;padding:5px 12px;border-radius:999px;font-weight:700;font-size:.85rem; background:#e0f2fe;color:#075985; border:1px solid #9fd5ff}
.draft-editor-page .title-input{font-size:1.05rem;font-weight:700;background:#fff;color:#000;border:1px solid #d1d5db;border-radius:10px;padding:6px 8px;outline:none;min-width:280px}

/* -------- Sticky toolbar --------------------------------------------- */
.draft-editor-page .toolbar-sticky{
  position:sticky; top:10px; z-index:20;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px; border:1px solid var(--line); border-radius:10px;
  background:rgba(13, 22, 43, .8); backdrop-filter: blur(6px);
  margin:10px 0 12px;
}
.draft-editor-page .toolbar-sticky .spacer{flex:1}

/* Search input + icon (BOLDER ICON) */
.draft-editor-page .search-wrap{position:relative; min-width:280px; flex:1; max-width:520px}
.draft-editor-page .search-wrap svg{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:20px; height:20px;              /* bigger */
  opacity:1;                            /* fully visible */
  pointer-events:none;
}
.draft-editor-page .search-wrap svg path{
  stroke-width:3;                        /* thicker line */
}
.draft-editor-page .search{
  padding-left:40px;                     /* extra room for bigger icon */
}
.draft-editor-page .search::placeholder{
  color:#334155;                         /* darker placeholder */
  opacity:1;
  font-weight:600;                       /* a bit bolder */
}

/* Buttons (local overrides, base.html also has a .btn) */
.draft-editor-page .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid #2a3a5f;background:#14203a;color:#e8eefc;text-decoration:none;cursor:pointer}
.draft-editor-page .btn:hover{background:#18264a}
.draft-editor-page .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.draft-editor-page .btn-primary:hover{background:#1d4ed8}
.draft-editor-page .btn-secondary{background:#0f172a;color:#fff;border-color:#0f172a}

/* BRIGHTER success button (Publish) */
.draft-editor-page .btn-success{
  background:#16c98a;
  color:#052018;
  border-color:#16c98a;
  box-shadow:0 0 0 2px rgba(22,201,138,.15);
}
.draft-editor-page .btn-success:hover{
  background:#12b07a;
  border-color:#12b07a;
  box-shadow:0 0 0 3px rgba(22,201,138,.25);
}

.draft-editor-page .btn-danger{background:#ef4444;color:#fff;border-color:#ef4444}
.draft-editor-page .btn-danger:hover{background:#dc2626;border-color:#dc2626}
.draft-editor-page .btn:disabled{opacity:.6;cursor:not-allowed}
.draft-editor-page .badge{padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:.8rem}
.draft-editor-page .dirty{display:none;margin-left:8px}

/* -------- Flash banners ---------------------------------------------- */
.draft-editor-page .error-banner{background:rgba(254,242,242,.95);color:#991b1b;border:1px solid #fecaca;padding:10px 12px;border-radius:10px;margin:8px 0;display:none}
.draft-editor-page .success-banner{background:rgba(236,253,245,.95);color:#065f46;border:1px solid #a7f3d0;padding:10px 12px;border-radius:10px;margin:8px 0;display:none}
.draft-editor-page .toast{position:fixed;right:16px;bottom:16px;background:#111827;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.25);display:none;z-index:1000}

/* -------- Table ------------------------------------------------------- */
.draft-editor-page .table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px; margin-top:12px}
.draft-editor-page table.editor{width:100%;border-collapse:separate;border-spacing:0}

/* Wrap content in all cells */
.draft-editor-page table.editor thead th,
.draft-editor-page table.editor tbody td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.draft-editor-page table.editor thead th{
  position:sticky;top:0;background:#0b1220;color:#e8eefc;font-weight:700;
  padding:10px;border-bottom:1px solid #24304d;text-align:left
}
.draft-editor-page table.editor tbody td{
  padding:8px;border-bottom:1px dashed #223356;vertical-align:top
}
.draft-editor-page table.editor tbody tr:nth-child(odd){background:#0f1a2e}
.draft-editor-page table.editor tbody tr:nth-child(even){background:#0b1527}

/* Inputs & textareas inside the table — normalize tightly */
.draft-editor-page table.editor input,
.draft-editor-page table.editor textarea,
.draft-editor-page table.editor select {
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0;
  background:#fff !important;
  color:#000 !important;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:.95rem;
  line-height:1.35;
  padding:7px 9px;
}

/* --- Added: shared textarea behavior used by name/description fields --- */
.draft-editor-page .cell-textarea {
  width: 100%;
  min-height: 32px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff !important;
  color: #000 !important;
  line-height: 1.3;
  white-space: pre-wrap;   /* wrap long names/descriptions */
  word-break: break-word;
  overflow: hidden;        /* for JS autosize */
  resize: vertical;        /* user can expand if desired */
}

/* Specific column widths */
.draft-editor-page .cell-price{max-width:140px}
.draft-editor-page .cell-number{max-width:110px}

/* -------- Row actions: keep buttons on one line ---------------------- */
.draft-editor-page .row-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;          /* never stack */
}
.draft-editor-page .row-actions .btn{
  padding:6px 10px;
  font-size:.85rem;
  white-space:nowrap;        /* NEVER break "Duplicate" or "Delete" */
  word-break:normal;
  overflow-wrap:normal;
}

/* Textareas behavior */
.draft-editor-page .desc-text{min-height:36px;resize:vertical;overflow:hidden}
.draft-editor-page .name-text{min-height:30px;resize:vertical;overflow:hidden}

/* Confidence badges */
.draft-editor-page .conf-badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:.72rem;font-weight:700;margin-left:6px}
.draft-editor-page .conf-high{background:rgba(16,185,129,.18);color:#16a34a;border:1px solid rgba(16,185,129,.35)}
.draft-editor-page .conf-med{background:rgba(245,158,11,.18);color:#d97706;border:1px solid rgba(245,158,11,.35)}
.draft-editor-page .conf-low{background:rgba(239,68,68,.18);color:#dc2626;border:1px solid rgba(239,68,68,.35)}

/* Export menu */
.draft-editor-page details.export{position:relative}
.draft-editor-page details.export summary{list-style:none;cursor:pointer;user-select:none}
.draft-editor-page details.export .menu{position:absolute;right:0;top:110%;background:#fff;color:#111827;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.15);min-width:220px;padding:6px;z-index:10}
.draft-editor-page details.export .menu a,
.draft-editor-page details.export .menu button{width:100%;text-align:left;background:none;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;color:#111827;text-decoration:none;display:block}
.draft-editor-page details.export .menu a:hover,
.draft-editor-page details.export .menu button:hover{background:#f3f4f6}

/* Row focus ring */
.draft-editor-page .row-focus{outline:2px solid #60a5fa; outline-offset:-2px}

/* Responsive */
@media (max-width: 1060px){
  .draft-editor-page .layout{grid-template-columns:1fr}
  .draft-editor-page .sidebar{position:static}
}

/* Align the textarea + badge in the name cell */
.draft-editor-page .name-cell{display:flex;gap:6px;align-items:flex-start}

/* --- Added: better focus visibility on editable fields --- */
.draft-editor-page table.editor input:focus,
.draft-editor-page table.editor textarea:focus,
.draft-editor-page table.editor select:focus,
.draft-editor-page .title-input:focus {
  outline: 2px solid #7aa2ff;
  outline-offset: 2px;
  border-color: #7aa2ff;
}

/* =======================================================================
   CUSTOMER LIGHT THEME — Editor overrides
   Applied when html.theme-customer is active (all non-admin users)
   ======================================================================= */

/* Root palette */
.theme-customer .draft-editor-page {
  --panel: #FCF7EF;
  --brand: #1C5764;
  --chip: #F6E7D8;
  --chipBorder: #EADCC8;
}

/* Sidebar */
.theme-customer .draft-editor-page .sidebar {
  background: #FCF7EF !important;
  border: 1px solid #EADCC8;
}
.theme-customer .draft-editor-page .sidebar h3 { color: #3A2210; }
.theme-customer .draft-editor-page .sidebar .cat .row {
  background: #F6E7D8;
  border-color: #EADCC8;
  color: #3A2210;
}
.theme-customer .draft-editor-page .sidebar .cat .row.active {
  border-color: var(--terracotta, #B3512F);
  background: rgba(184, 92, 56, 0.08);
}
.theme-customer .draft-editor-page .sidebar .cat .row:hover {
  border-color: #B3512F;
}
.theme-customer .draft-editor-page .sidebar .cat .row .count { color: #8A745C; }

/* Main editor container */
.theme-customer .draft-editor-page .editor-main {
  background: #FCF7EF;
  border-color: #EADCC8;
}

/* Toolbar */
.theme-customer .draft-editor-page .toolbar,
.theme-customer .draft-editor-page .toolbar-sticky {
  background: rgba(239, 226, 211, 0.9) !important;
  border-color: #EADCC8 !important;
  backdrop-filter: blur(8px);
}

/* Buttons */
.theme-customer .draft-editor-page .btn {
  background: #F6E7D8;
  border-color: #EADCC8;
  color: #3A2210;
}
.theme-customer .draft-editor-page .btn:hover {
  background: #F6E7D8;
}
.theme-customer .draft-editor-page .btn-primary {
  background: var(--terracotta, #B3512F) !important;
  color: #fff !important;
  border-color: var(--terracotta, #B3512F) !important;
}
.theme-customer .draft-editor-page .btn-primary:hover {
  background: #a04e30 !important;
}
.theme-customer .draft-editor-page .btn-secondary {
  background: #1C5764 !important;
  color: #fff !important;
  border-color: #1C5764 !important;
}
.theme-customer .draft-editor-page .btn-success {
  background: #1C5764 !important;
  color: #fff !important;
  border-color: #1C5764 !important;
}
.theme-customer .draft-editor-page .btn-success:hover {
  background: #245050 !important;
  border-color: #245050 !important;
}
.theme-customer .draft-editor-page .btn-danger {
  background: #d32f2f !important;
  color: #fff !important;
  border-color: #d32f2f !important;
}

/* Table */
.theme-customer .draft-editor-page table.editor thead th {
  background: #F6E7D8 !important;
  color: #3A2210 !important;
  border-bottom-color: #EADCC8 !important;
}
.theme-customer .draft-editor-page table.editor tbody tr:nth-child(odd) {
  background: #FCF7EF !important;
}
.theme-customer .draft-editor-page table.editor tbody tr:nth-child(even) {
  background: #F6E7D8 !important;
}
.theme-customer .draft-editor-page table.editor tbody td {
  border-bottom-color: #EADCC8 !important;
  color: #3A2210;
}
.theme-customer .draft-editor-page .table-wrap {
  border-color: #EADCC8;
}

/* Inputs (already white, just ensure borders match) */
.theme-customer .draft-editor-page table.editor input,
.theme-customer .draft-editor-page table.editor textarea,
.theme-customer .draft-editor-page table.editor select {
  border-color: #EADCC8;
}
.theme-customer .draft-editor-page table.editor input:focus,
.theme-customer .draft-editor-page table.editor textarea:focus,
.theme-customer .draft-editor-page table.editor select:focus,
.theme-customer .draft-editor-page .title-input:focus {
  outline-color: #1C5764;
  border-color: #1C5764;
}

/* Title input */
.theme-customer .draft-editor-page .title-input {
  background: #fff !important;
  color: #3A2210 !important;
  border-color: #EADCC8 !important;
}

/* Toast */
.theme-customer .draft-editor-page .toast {
  background: #3A2210;
  color: #fff;
}

/* Search */
.theme-customer .draft-editor-page input[type="search"],
.theme-customer .draft-editor-page .search-input {
  background: #fff !important;
  color: #3A2210 !important;
  border-color: #EADCC8 !important;
}

/* Status pill override in header */
.theme-customer .draft-editor-page .pill {
  font-weight: 600;
}

/* Row focus */
.theme-customer .draft-editor-page .row-focus {
  outline-color: #B3512F;
}

/* Confidence badges — keep colors, they work on light */

/* Export dropdown */
.theme-customer .draft-editor-page details.export .menu {
  background: #fff !important;
  border-color: #EADCC8 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
  color: #3A2210 !important;
}
.theme-customer .draft-editor-page details.export .menu a,
.theme-customer .draft-editor-page details.export .menu button {
  color: #3A2210 !important;
}
.theme-customer .draft-editor-page details.export .menu a:hover,
.theme-customer .draft-editor-page details.export .menu button:hover {
  background: #F6E7D8 !important;
  color: #3A2210 !important;
}
.theme-customer .draft-editor-page details.export .menu .export-divider {
  border-top-color: #EADCC8 !important;
}
.theme-customer .draft-editor-page details.export .menu .export-section-label {
  color: #8A745C !important;
}

/* Variant rows */
.theme-customer .draft-editor-page tr.variant-row {
  background: rgba(184, 92, 56, 0.04) !important;
}
.theme-customer .draft-editor-page tr.variant-row td {
  border-bottom-color: #EADCC8 !important;
}