/* /connect/admin/views/forms.css — Admin Forms Builder v1
 * Scoped under `.forms-view` / `.forms-*` / `.frm-*`. Uses only --bcc-* tokens
 * (the single `#fff` literal is an intentional on-gradient foreground).
 * Loaded AFTER connect-tokens.css + admin-shell.css + admin-views.css.
 * Breakpoints: <=480 | 481-767 | 768-1024 | >=1025
 * ─────────────────────────────────────────────────────────────────────── */

/* Hidden attribute must beat the layout display rules below. */
.forms-view [hidden] { display: none !important; }

/* ================================================================
   HEADER
=============================================================== */
.forms-view { position: relative; }

.forms-header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  flex-wrap:       wrap;
}

.forms-header-titles { min-width: 0; }

.forms-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-3xl);
  font-weight:    600;
  letter-spacing: -.01em;
  color:          var(--bcc-ink);
  margin:         0;
}

.forms-sub { margin-top: var(--bcc-s1); }

.forms-actions { display: flex; gap: var(--bcc-s2); flex-wrap: wrap; }

.forms-action-btn { min-height: 44px; }

/* ================================================================
   TABS
=============================================================== */
.forms-view .forms-tabs {
  display:       flex;
  gap:           var(--bcc-s1);
  border-bottom: 1px solid var(--bcc-border);
  margin:        var(--bcc-s5) 0 var(--bcc-s4);
}

.forms-view .forms-tab {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--bcc-s2);
  min-height:    44px;
  padding:       0 var(--bcc-s4);
  margin-bottom: -1px;
  border:        none;
  border-bottom: 2px solid transparent;
  background:    transparent;
  color:         var(--bcc-ink-3);
  font:          inherit;
  font-size:     var(--bcc-t-sm);
  font-weight:   500;
  cursor:        pointer;
  border-radius: var(--bcc-r-sm) var(--bcc-r-sm) 0 0;
  transition:    color var(--bcc-dur-1) var(--bcc-ease),
                 background var(--bcc-dur-1) var(--bcc-ease),
                 border-color var(--bcc-dur-1) var(--bcc-ease);
}

.forms-view .forms-tab:hover { color: var(--bcc-ink); background: var(--bcc-surface-2); }

.forms-view .forms-tab.active {
  color:              var(--bcc-primary);
  border-bottom-color: var(--bcc-primary);
  background:         var(--bcc-primary-tint);
  font-weight:        600;
}

/* ================================================================
   LOADING / EMPTY / ERROR / NO-ACCESS
=============================================================== */
.forms-loading { display: flex; flex-direction: column; gap: var(--bcc-s3); padding: var(--bcc-s4) 0; }
.forms-sk-title { width: 40%; height: 24px; }
.forms-sk-line  { width: 70%; }

.forms-empty { text-align: center; }

.forms-noaccess { max-width: 480px; margin: 0 auto; }

.forms-error { text-align: center; padding: var(--bcc-s8) var(--bcc-s4); }
.forms-error-icon { color: var(--bcc-warning); margin-bottom: var(--bcc-s3); }

/* ================================================================
   FORM LIST
=============================================================== */
.forms-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--bcc-s4);
}

.forms-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  padding:        var(--bcc-s4);
  cursor:         pointer;
  transition:     border-color var(--bcc-dur-2) var(--bcc-ease),
                  box-shadow var(--bcc-dur-2) var(--bcc-ease),
                  transform var(--bcc-dur-2) var(--bcc-ease);
}

.forms-card:hover {
  border-color: var(--bcc-border-strong);
  box-shadow:   var(--bcc-shadow-1);
  transform:    translateY(-2px);
}

.forms-card:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

.forms-card-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--bcc-s2);
}

.forms-card-name {
  font-size:   var(--bcc-t-md);
  font-weight: 600;
  color:       var(--bcc-ink);
  min-width:   0;
}

.forms-card-badges { display: flex; gap: var(--bcc-s1); flex-wrap: wrap; flex-shrink: 0; }

.forms-card-slug {
  font-family: var(--bcc-font);
  word-break:  break-all;
}

.forms-card-desc {
  margin:           0;
  display:          -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:         hidden;
}

.forms-card-foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s2);
  flex-wrap:       wrap;
  margin-top:      auto;
  padding-top:     var(--bcc-s2);
  border-top:      1px solid var(--bcc-border);
}

.forms-card-actions { display: flex; gap: var(--bcc-s1); flex-wrap: wrap; }

.forms-view .forms-iconbtn { min-width: 44px; min-height: 44px; padding: 0; }

/* ================================================================
   EDITOR
=============================================================== */
.forms-editor { margin-bottom: var(--bcc-s5); }

.forms-editor-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  margin-bottom:   var(--bcc-s4);
}

.forms-editor-title {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-2xl);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
}

.forms-editor-grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--bcc-s3) var(--bcc-s4);
}

.forms-editor-section {
  margin-top:  var(--bcc-s4);
  padding-top: var(--bcc-s4);
  border-top:  1px solid var(--bcc-border);
}

.forms-editor-section-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  margin-bottom:   var(--bcc-s3);
}

.forms-editor-section-title {
  font-size:   var(--bcc-t-md);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
}

.forms-editor-foot {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--bcc-s2);
  flex-wrap:       wrap;
  margin-top:      var(--bcc-s4);
  padding-top:     var(--bcc-s4);
  border-top:      1px solid var(--bcc-border);
}

/* Field rows */
.frm-fields { display: flex; flex-direction: column; gap: var(--bcc-s3); }

.frm-field-row {
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s3);
}

.frm-field-main {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   var(--bcc-s3);
}

.frm-field-opts { display: none; margin-top: var(--bcc-s2); }
.frm-field-row[data-type="select"] .frm-field-opts { display: block; }

.frm-field-cell { margin: 0; }
.frm-field-cell .bcc-field { margin: 0; }

.frm-field-foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  margin-top:      var(--bcc-s3);
  flex-wrap:       wrap;
}

.frm-field-actions { display: flex; gap: var(--bcc-s2); }

.forms-view .frm-iconbtn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   var(--bcc-r-sm);
  border:          1px solid var(--bcc-border);
  background:      var(--bcc-surface-1);
  color:           var(--bcc-ink-2);
  cursor:          pointer;
  transition:      background var(--bcc-dur-1) var(--bcc-ease),
                   color var(--bcc-dur-1) var(--bcc-ease),
                   border-color var(--bcc-dur-1) var(--bcc-ease);
}

.forms-view .frm-iconbtn:hover {
  background:   var(--bcc-surface-3);
  color:        var(--bcc-ink);
  border-color: var(--bcc-primary);
}

.forms-view .frm-iconbtn.frm-iconbtn-danger:hover {
  color:        var(--bcc-danger);
  border-color: var(--bcc-danger);
}

.forms-view .frm-iconbtn:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* ================================================================
   SUBMISSIONS
=============================================================== */
.forms-subs-bar {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  margin-bottom:   var(--bcc-s4);
  flex-wrap:       wrap;
}

.forms-subs-select { min-width: 240px; margin: 0; }

.forms-subs-count { margin-bottom: var(--bcc-s2); }

.forms-table-wrap { overflow-x: auto; border: 1px solid var(--bcc-border); border-radius: var(--bcc-r-md); }

.forms-cell-date { white-space: nowrap; }
.forms-cell-actions { white-space: nowrap; }

/* ================================================================
   SHARE MODAL (rendered outside .forms-view — keep selectors global)
=============================================================== */
.forms-share { display: flex; flex-direction: column; gap: var(--bcc-s3); }

.forms-share-warning {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s2) var(--bcc-s3);
  border-radius: var(--bcc-r-sm);
  background:  var(--bcc-warning-soft);
  color:       var(--bcc-warning);
  font-size:   var(--bcc-t-sm);
  font-weight: 500;
}

.forms-share-link { display: flex; gap: var(--bcc-s2); align-items: center; }
.forms-share-link .bcc-input { flex: 1; min-width: 0; }
.forms-share-link .bcc-btn { flex-shrink: 0; min-height: 44px; }

.forms-share-qr { display: flex; justify-content: center; padding: var(--bcc-s2); }
.forms-share-qr img {
  width:         200px;
  height:        200px;
  max-width:     100%;
  border-radius: var(--bcc-r-md);
  background:    #fff;
  padding:       var(--bcc-s2);
}

.forms-share .bcc-btn-block { min-height: 44px; }

/* ================================================================
   RESPONSIVE
=============================================================== */
@media (max-width: 1024px) {
  .forms-editor-grid { grid-template-columns: 1fr; }
  .frm-field-main { grid-template-columns: 2fr 1fr 1fr; }
}

@media (max-width: 767px) {
  .frm-field-main { grid-template-columns: 1fr 1fr; }
  .frm-field-key  { grid-column: 1 / 2; }
  .frm-field-type { grid-column: 2 / 3; }

  .forms-subs-select { min-width: 0; width: 100%; }
  .forms-subs-bar { flex-direction: column; align-items: stretch; }
  .forms-subs-bar .forms-action-btn { width: 100%; }

  /* Submissions table collapses into stacked cards. */
  .forms-table thead { display: none; }
  .forms-table, .forms-table tbody, .forms-table tr, .forms-table td { display: block; width: 100%; }
  .forms-table tr {
    border:        1px solid var(--bcc-border);
    border-radius: var(--bcc-r-md);
    margin-bottom: var(--bcc-s3);
    padding:       var(--bcc-s2) 0;
  }
  .forms-table td {
    display:         flex;
    justify-content: space-between;
    gap:             var(--bcc-s3);
    border-bottom:   none;
    padding:         var(--bcc-s2) var(--bcc-s3);
    text-align:      right;
  }
  .forms-table td::before {
    content:       attr(data-label);
    font-weight:   600;
    color:         var(--bcc-ink-3);
    text-align:    left;
    flex-shrink:   0;
  }
  .forms-cell-actions { justify-content: flex-end; }
  .forms-cell-actions::before { content: ''; }
}

@media (max-width: 480px) {
  .forms-header { flex-direction: column; align-items: stretch; }
  .forms-actions { width: 100%; }
  .forms-actions .forms-action-btn { flex: 1; }

  .forms-grid { grid-template-columns: 1fr; }

  .frm-field-main { grid-template-columns: 1fr; }
  .frm-field-key, .frm-field-type { grid-column: auto; }

  .forms-view .forms-tab { flex: 1; justify-content: center; padding: 0 var(--bcc-s2); }

  .forms-share-link { flex-direction: column; align-items: stretch; }
  .forms-share-link .bcc-btn { width: 100%; }
}

@media (min-width: 1025px) {
  .forms-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frm-field-main    { grid-template-columns: 2fr 1fr 1fr; }
}

/* ================================================================
   REDUCED MOTION
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .forms-view *,
  .forms-view *::before,
  .forms-view *::after {
    animation-duration:        .001ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       .001ms !important;
    scroll-behavior:           auto   !important;
  }

  .forms-card:hover { transform: none; }
}