/* Theme */
#art-inventory{
  --bg:#000; --ink:#000; --card:#fff; --line:#e9e9e9;
  --accent:#e60023; /* headings/buttons */
  --new:#1e90ff; /* blue */
  --active:#16a34a; /* green */
  --inactive:#ef4444; /* red */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  border: 2px solid #000;
  border-radius: 8px;
  margin-left: 10px;
  margin-right: 10px;
  color: var(--ink); background: #0ff; padding:16px;
}
#art-inventory h1{ display: inline-block; border: 2px solid #000; border-radius: 6px; background: #fff; padding: 1px 8px 3px 8px; margin:0 0 12px; color:var(--accent); }
#art-inventory .toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
#art-inventory .toolbar button{ cursor:pointer; }
#art-inventory .toolbar input[type="search"]{ padding:6px 8px; border:1px solid #ccc; border-radius:6px; }

/* Cabinet list */
#art-inventory .cabinet{ display:flex; flex-direction:column; gap:8px; }
#art-inventory #cabinet .notes-row textarea { width: 100%; min-height: 2.2rem; resize: vertical; }
#art-inventory #cabinet .card-body .rows {
    display: grid;
    grid-template-columns: 1fr 1fr;     /* left/right column */
    gap: 12px;
}
/* Make the notes row span both columns */
#art-inventory #cabinet .card-body .rows .notes-row {
    grid-column: 1 / -1;    /*full width*/
    display: grid;
    grid-template-columns: 80px 1fr;    /*label | text area*/
    align-items: start;
    gap: 8px;
}

/*label*/
#art-inventory #cabinet .card-body .rows .notes-row .label {
    font-weight: 600;
    align-self: center;
}

#art-inventory #cabinet .card-body .rows .notes-row textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 6px 8px;
    border: 1px solid #888;
    border-radius: 6px;
    resize: vertical;   /*user can expand if needed*/
    /*font: inherit;*/      /*match app font*/
    box-sizing: border-box;
}

#art-inventory .card{
  background:var(--card); border:2px solid var(--accent); border-radius:10px;
  overflow:hidden;
}
#art-inventory .card-header{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center;
  padding:10px 12px; cursor:pointer;
}
#art-inventory .chev{ font-weight:700; user-select:none; }
#art-inventory .name{ font-weight:600; }
#art-inventory .tag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; color:#fff; }
#art-inventory .tag.new{ background:var(--new); }
#art-inventory .tag.active{ background:var(--active); }
#art-inventory .tag.inactive{ background:var(--inactive); }
#art-inventory .smallbtn{ font-size:12px; padding:4px 8px; border:1px solid #ccc; background:#fafafa; border-radius:6px; cursor:pointer; }
#art-inventory .smallbtn:hover{ background:#f0f0f0; }

/* body */
#art-inventory .card-body{ padding:12px; border-top:1px solid var(--line); display:none; }
#art-inventory .card.open .card-body{ display:block; }

#art-inventory .rows{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }
#art-inventory .row{ display:flex; align-items:center; gap:8px; }
#art-inventory .qty{ display:inline-flex; gap:6px; align-items:center; }
#art-inventory .qty button{ width:28px; height:28px; border:1px solid #ccc; background:#fff; border-radius:6px; cursor:pointer; }

#art-inventory .actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

#art-inventory dialog{
  border:1px solid var(--line); border-radius:12px; background:#fff; color:#000;
  margin: 15px;
  padding:14px; width:min(640px, 92vw);
}
#art-inventory dialog::backdrop{ background:rgba(0,0,0,.45); }
#art-inventory form.grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
#art-inventory form.grid label{ display:grid; gap:6px; }
#art-inventory input[type="text"], 
#art-inventory input[type="number"]{
  padding:6px 8px; border:1px solid #bbb; border-radius:6px; background:#fff;
}
#art-inventory .dialog-actions{ display:flex; gap:8px; justify-content:flex-end; }
#art-inventory .stats{ display:grid; gap:8px; }
#art-inventory .stats h3{ margin:0; color:var(--accent); }



/* utility */
#art-inventory hr.sep{ border:0; border-top:1px solid var(--line); margin:10px 0; }

/*NEW for data*/
#art-inventory .period { border: 1px solid #000; border-radius: 6px; padding: 8px; margin: 6px 0; background: #fff; }
#art-inventory .period.current { outline: 2px dashed red; }
#art-inventory .period-head { margin-bottom: 6px; color: red; }
#art-inventory .period-grid { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* possible css clashing fixes */

/* keep headings inside the tracker consistent*/
/*#art-inventory h1,*/
/*#art-inventory h2,*/
/*#art-inventory h3,*/
#art-inventory h4 { color: inherit; }

/* undo the global underline + color for <strong> inside the tracker */
#art-inventory strong {
  text-decoration: none;
  color: inherit;
}

/* prevent setwide img rule from shrinking images inside tracker (for later adding images) */
/*#art-inventory img {
  max-width: 100%;
  height: auto;
}*/