/* ==========================================================================
   Inventory Plugin Front-End Styles (inventory.css)
   Version: 2.0.0
   ========================================================================== */

/* ---------------------------------------
   Global & Accordion Container
   --------------------------------------- */
#cip-accordion {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
               Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  max-width: 800px;
  margin: 2em auto;
}

.cip-accordion details {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1em;
  overflow: hidden;
  background: #fff;
}

/* ---------------------------------------
   Panel Summary (Header)
   --------------------------------------- */
.cip-panel summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.75em 1em;
  background: var(--bg, #888);
  color: #fff;
  font-weight: 500;
}

.cip-panel summary::-webkit-details-marker {
  display: none;
}

.cip-panel summary .title {
  flex: 1;
  font-size: 1.1em;
}

.cip-panel summary .count {
  font-size: 0.95em;
}

/* ---------------------------------------
   Panel Body (Expanded Content)
   --------------------------------------- */
.cip-panel .body {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* ---------------------------------------
   Row Layout
   --------------------------------------- */
.cip-accordion .row {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.cip-accordion .row input[type="text"],
.cip-accordion .row input[type="number"],
.cip-accordion .row select {
  flex: 1;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  box-sizing: border-box;
}

.cip-accordion .row input:focus,
.cip-accordion .row select:focus {
  border-color: #4CAF50;
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

/* ---------------------------------------
   Buttons (Photo & Add)
   --------------------------------------- */
.btn-photo,
.btn-add {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 0.5em 0.75em;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2em;
  transition: background 0.2s ease;
}

.btn-photo:hover,
.btn-add:hover {
  background: #3e8e41;
}

/* ---------------------------------------
   Video / Canvas / Preview
   --------------------------------------- */
.video {
  width: 100%;
  max-height: 300px;
  background: #000;
  border-radius: 4px;
}

.canvas {
  display: none;
}

.preview {
  display: none;
  width: 100%;
  max-height: 300px;
  border-radius: 4px;
  object-fit: contain;
}

/* ---------------------------------------
   Table of Entries
   --------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 0.5em;
  text-align: center;
  font-size: 0.95em;
}

.table th {
  background: #f9f9f9;
  font-weight: 500;
}

.thumb {
  width: 50px;
  height: auto;
  border-radius: 4px;
}

/* ---------------------------------------
   Submit Button
   --------------------------------------- */
.submit-wrap {
  text-align: center;
  margin-top: 1.5em;
}

#cip-submit-all {
  padding: 0.75em 1.5em;
  background: #4CAF50;
  border: 1px solid #4CAF50;
  color: #fff;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#cip-submit-all:hover {
  background: #3e8e41;
  border-color: #3e8e41;
}

/* ---------------------------------------
   Login Code Entry (Front-End)
   --------------------------------------- */
.cip-code-entry {
  max-width: 400px;
  margin: 2em auto;
  padding: 1.5em;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: #fff;
}

.cip-code-entry h2 {
  margin-bottom: 1em;
  font-size: 1.5em;
  color: #333;
  text-align: center;
}

.cip-code-entry form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.cip-code-entry input[type="text"] {
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  box-sizing: border-box;
}

.cip-code-entry input[type="text"]:focus {
  border-color: #4CAF50;
  outline: none;
  box-shadow: 0 0 0 2px rgba(76,175,80,0.2);
}

.cip-code-entry button {
  padding: 0.75em;
  background: #4CAF50;
  border: 1px solid #4CAF50;
  color: #fff;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cip-code-entry button:hover {
  background: #3e8e41;
  border-color: #3e8e41;
}

/* ---------------------------------------
   Responsive Adjustments
   --------------------------------------- */
@media (max-width: 600px) {
  .cip-accordion .row {
    flex-direction: column;
    align-items: stretch;
  }
  .cip-code-entry {
    margin: 1em;
    padding: 1em;
  }
}