/* ═══════════════════════════════════════════
   TripOps — Feature Additions CSS
   Append this to the bottom of style.css
   ═══════════════════════════════════════════ */

/* ── Panels ────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.panel h2 { font-size: 1.05rem; margin-bottom: 0.75rem; }

/* ── Inline Form ───────────────────────── */
.inline-form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form .form-group { margin-bottom: 0; }
.inline-form input { min-width: 200px; }
.inline { display: inline; }

/* ── Header Actions ────────────────────── */
.header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* ── Hidden Utility ────────────────────── */
.hidden { display: none !important; }

/* ── Upload Form ───────────────────────── */
.upload-form .form-row { margin-bottom: 0.75rem; }
.upload-form input[type="file"] { padding: 0.4rem; }

/* ── Binder ────────────────────────────── */
.binder-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--surface-2); }
.binder-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.binder-header h2 { margin: 0; }

.doc-grid { display: flex; flex-direction: column; gap: 1.25rem; }
.doc-category { }
.doc-cat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 0.5rem; }
.doc-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius); margin-bottom: 0.4rem; }
.doc-icon { font-size: 1.3rem; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: 0.78rem; color: var(--text-3); display: block; margin-top: 0.15rem; }

/* ── Icon Buttons ──────────────────────── */
.btn-icon { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 0.25rem; border-radius: 4px; transition: background 0.15s; flex-shrink: 0; }
.btn-icon:hover { background: var(--surface-2); }

/* ── Danger Button ─────────────────────── */
.btn-danger { background: var(--red); color: #fff; border: none; }
.btn-danger:hover { background: #b83030; }

/* ── Modal ─────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modal { background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); }
.modal h3 { margin-bottom: 1rem; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; }

/* ── Template Cards ────────────────────── */
.template-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.template-card { background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
.template-card-view { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.template-card-main h3 { font-size: 1rem; margin: 0.35rem 0 0.2rem; }
.template-card-main p { font-size: 0.88rem; margin: 0; }
.template-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; align-items: flex-start; }
.template-edit-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--surface-2); }
.form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* ── Checkbox Label ────────────────────── */
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; padding-top: 1.6rem; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

/* ── Form Select ───────────────────────── */
.form-group select {
  width: 100%; padding: 0.6rem 0.85rem; font-family: var(--font); font-size: 0.95rem;
  background: var(--bg); border: 1.5px solid var(--surface-3); border-radius: var(--radius);
  color: var(--text); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239a9590' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
.form-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }