/*
 * CTAF Theme Components
 * Shared frontend data UI components for CTAF modules.
 * Scope: .ctaf-data-* classes only. No global layout or theme logic override.
 */

.ctaf-data-section,
.ctaf-data-section *{
  box-sizing:border-box;
}

.ctaf-data-section{
  width:100%;
  color:var(--ctaf-text);
  font-family:var(--ctaf-font);
  font-size:var(--ctaf-body-size);
  line-height:var(--ctaf-line-height);
}

.ctaf-data-section a{
  color:inherit;
  text-decoration:none;
}

.ctaf-data-section a:hover,
.ctaf-data-section a:focus,
.ctaf-data-section a:active{
  text-decoration:none;
}

.ctaf-data-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin:0 0 18px;
  padding:var(--ctaf-data-toolbar-padding,16px);
  background:#fff;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  border-radius:var(--ctaf-data-toolbar-radius,8px);
  box-shadow:var(--ctaf-data-panel-shadow,none);
}

.ctaf-data-toolbar-main,
.ctaf-data-toolbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.ctaf-data-total{
  color:var(--ctaf-muted);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}

.ctaf-data-search{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.ctaf-data-search-input,
.ctaf-data-input,
.ctaf-data-select,
.ctaf-data-textarea{
  width:100%;
  min-height:40px;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  border-radius:min(var(--ctaf-button-radius),8px);
  background:#fff;
  color:var(--ctaf-text);
  font-family:var(--ctaf-font);
  font-size:15px;
  line-height:1.5;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}

.ctaf-data-search-input,
.ctaf-data-input,
.ctaf-data-select{
  padding:0 12px;
}

.ctaf-data-select{
  padding-right:34px;
}

.ctaf-data-textarea{
  min-height:120px;
  padding:10px 12px;
  resize:vertical;
}

.ctaf-data-search-input:focus,
.ctaf-data-input:focus,
.ctaf-data-select:focus,
.ctaf-data-textarea:focus{
  border-color:var(--ctaf-primary);
  box-shadow:0 0 0 2px rgba(7,93,168,.12);
}

.ctaf-data-filter{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ctaf-data-filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--ctaf-data-chip-height,30px);
  padding:0 12px;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  border-radius:var(--ctaf-data-chip-radius,6px);
  background:#fff;
  color:var(--ctaf-primary);
  font-family:var(--ctaf-font);
  font-size:var(--ctaf-data-chip-font-size,14px);
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.ctaf-data-btn,
.ctaf-data-btn-primary,
.ctaf-data-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--ctaf-button-height);
  padding:0 18px;
  border:1px solid var(--ctaf-primary);
  border-radius:var(--ctaf-button-radius);
  font-family:var(--ctaf-font);
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.ctaf-data-btn,
.ctaf-data-btn-primary{
  background:var(--ctaf-primary);
  color:#fff;
}

.ctaf-data-btn-secondary{
  background:#fff;
  color:var(--ctaf-primary);
}

.ctaf-data-page-btn,
.ctaf-data-attachment{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  background:#fff;
  color:var(--ctaf-primary);
  font-family:var(--ctaf-font);
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.ctaf-data-filter-btn:hover,
.ctaf-data-filter-btn:focus,
.ctaf-data-btn-secondary:hover,
.ctaf-data-btn-secondary:focus,
.ctaf-data-page-btn:hover,
.ctaf-data-page-btn:focus{
  background:var(--ctaf-soft);
  border-color:var(--ctaf-primary);
  color:var(--ctaf-primary);
}

.ctaf-data-btn:hover,
.ctaf-data-btn:focus,
.ctaf-data-btn-primary:hover,
.ctaf-data-btn-primary:focus{
  background:var(--ctaf-primary);
  border-color:var(--ctaf-primary);
  color:#fff;
  opacity:.92;
}

.ctaf-data-filter-btn.is-active,
.ctaf-data-filter-btn[aria-current="true"],
.ctaf-data-page-btn.is-current,
.ctaf-data-page-btn[aria-current="page"]{
  background:var(--ctaf-primary);
  border-color:var(--ctaf-primary);
  color:#fff;
}

.ctaf-data-filter-btn.is-active:hover,
.ctaf-data-filter-btn[aria-current="true"]:hover,
.ctaf-data-page-btn.is-current:hover,
.ctaf-data-page-btn[aria-current="page"]:hover{
  background:var(--ctaf-primary);
  border-color:var(--ctaf-primary);
  color:#fff;
}

.ctaf-data-panel{
  width:100%;
  background:#fff;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  border-radius:var(--ctaf-data-panel-radius,var(--ctaf-card-radius));
  box-shadow:var(--ctaf-data-panel-shadow,none);
  overflow:hidden;
}

.ctaf-data-card{
  background:#fff;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  border-radius:var(--ctaf-data-panel-radius,var(--ctaf-card-radius));
  box-shadow:var(--ctaf-data-panel-shadow,var(--ctaf-card-shadow));
  padding:var(--ctaf-data-panel-padding,var(--ctaf-card-padding));
}

.ctaf-data-list{
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.ctaf-data-row{
  display:grid;
  align-items:center;
  gap:14px;
  min-height:70px;
  padding:var(--ctaf-data-table-row-padding,12px) 18px;
  border-bottom:var(--ctaf-data-table-border-width,1px) solid var(--ctaf-border);
  color:var(--ctaf-text);
  background:#fff;
  transition:background-color .18s ease,color .18s ease;
}

.ctaf-data-row:last-child{
  border-bottom:0;
}

.ctaf-data-row:hover,
.ctaf-data-row:focus-within{
  background:var(--ctaf-soft);
}

.ctaf-data-title{
  min-width:0;
  color:var(--ctaf-text);
  font-size:16px;
  font-weight:700;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}

.ctaf-data-row:hover .ctaf-data-title{
  color:var(--ctaf-primary);
}

.ctaf-data-meta{
  color:var(--ctaf-muted);
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}

.ctaf-data-tag,
.ctaf-data-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--ctaf-data-chip-height,30px);
  padding:0 10px;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  border-radius:var(--ctaf-data-chip-radius,6px);
  background:var(--ctaf-soft);
  color:var(--ctaf-primary);
  font-size:var(--ctaf-data-chip-font-size,14px);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.ctaf-data-action{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  color:var(--ctaf-primary);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

.ctaf-data-attachment{
  min-height:var(--ctaf-data-attachment-height,34px);
  padding:0 12px;
  border-radius:var(--ctaf-data-attachment-radius,6px);
  font-size:var(--ctaf-data-attachment-font-size,13px);
  white-space:nowrap;
}

.ctaf-data-attachment:hover,
.ctaf-data-attachment:focus{
  background:var(--ctaf-primary);
  border-color:var(--ctaf-primary);
  color:#fff;
}

.ctaf-data-table-wrap{
  width:100%;
  overflow-x:auto;
  background:#fff;
  border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
  border-radius:var(--ctaf-data-panel-radius,var(--ctaf-card-radius));
  box-shadow:var(--ctaf-data-panel-shadow,none);
}

.ctaf-data-table{
  width:100%;
  border-collapse:collapse;
  color:var(--ctaf-text);
  font-family:var(--ctaf-font);
  font-size:15px;
}

.ctaf-data-table th,
.ctaf-data-table td{
  padding:var(--ctaf-data-table-row-padding,12px) 14px;
  border-bottom:var(--ctaf-data-table-border-width,1px) solid var(--ctaf-border);
  text-align:left;
  vertical-align:middle;
}

.ctaf-data-table th{
  background:var(--ctaf-soft);
  color:var(--ctaf-text);
  font-weight:700;
}

.ctaf-data-table tr:last-child td{
  border-bottom:0;
}

.ctaf-data-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:20px;
  flex-wrap:wrap;
}

.ctaf-data-page-btn{
  width:var(--ctaf-data-page-size,38px);
  min-width:var(--ctaf-data-page-size,38px);
  height:var(--ctaf-data-page-size,38px);
  padding:0 10px;
  border-radius:var(--ctaf-data-page-radius,6px);
  font-size:14px;
}

.ctaf-data-empty{
  padding:28px 20px;
  border:var(--ctaf-data-border-width,1px) dashed var(--ctaf-border);
  border-radius:var(--ctaf-data-panel-radius,var(--ctaf-card-radius));
  background:var(--ctaf-soft);
  color:var(--ctaf-muted);
  text-align:center;
  font-size:15px;
  font-weight:600;
}

@media(max-width:720px){
  .ctaf-data-section{
    font-size:var(--ctaf-body-size-mobile);
  }

  .ctaf-data-toolbar{
    align-items:stretch;
    flex-direction:column;
    padding:var(--ctaf-data-toolbar-padding,14px);
  }

  .ctaf-data-toolbar-main,
  .ctaf-data-toolbar-actions,
  .ctaf-data-search,
  .ctaf-data-filter{
    width:100%;
  }

  .ctaf-data-search{
    flex-direction:column;
    align-items:stretch;
  }

  .ctaf-data-filter-btn{
    min-height:var(--ctaf-data-chip-height,30px);
    font-size:max(12px,calc(var(--ctaf-data-chip-font-size,14px) - 1px));
  }

  .ctaf-data-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-height:0;
    padding:var(--ctaf-data-panel-padding,16px);
    border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
    border-radius:var(--ctaf-data-panel-radius,var(--ctaf-card-radius));
    box-shadow:var(--ctaf-data-panel-shadow,none);
    margin:0 0 10px;
  }

  .ctaf-data-panel{
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    background:transparent;
  }

  .ctaf-data-list{
    display:block;
  }

  .ctaf-data-title{
    width:100%;
    font-size:15px;
    -webkit-line-clamp:3;
  }

  .ctaf-data-meta{
    font-size:13px;
  }

  .ctaf-data-table-wrap{
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    background:transparent;
  }

  .ctaf-data-table,
  .ctaf-data-table thead,
  .ctaf-data-table tbody,
  .ctaf-data-table tr,
  .ctaf-data-table th,
  .ctaf-data-table td{
    display:block;
  }

  .ctaf-data-table thead{
    display:none;
  }

  .ctaf-data-table tr{
    margin-bottom:10px;
    border:var(--ctaf-data-border-width,1px) solid var(--ctaf-border);
    border-radius:var(--ctaf-data-panel-radius,var(--ctaf-card-radius));
    box-shadow:var(--ctaf-data-panel-shadow,none);
    background:#fff;
    overflow:hidden;
  }

  .ctaf-data-table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-bottom:var(--ctaf-data-table-border-width,1px) solid var(--ctaf-border);
  }

  .ctaf-data-table td::before{
    content:attr(data-label);
    flex:0 0 34%;
    color:var(--ctaf-muted);
    font-weight:700;
  }

  .ctaf-data-table td:last-child{
    border-bottom:0;
  }
}