/* ============================================================
   ALP Page Styles — demo-pages.css
   Styles for Demo Pages Registry and HTML File Manager
   ============================================================ */

.dp-page { max-width: 1100px; margin: 0 auto; }

/* Header */
.dp-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.dp-title { font-size:26px; font-weight:700; color:var(--text-primary); margin:0 0 4px; }
.dp-subtitle { font-size:13px; color:var(--text-secondary); margin:0; }
.dp-add-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
  border:none; border-radius:10px; font-size:13px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s;
  white-space:nowrap; box-shadow:0 4px 12px rgba(99,102,241,0.3);
}
.dp-add-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(99,102,241,0.4); }
.dp-add-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

/* Info banner */
.dp-info-banner {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:rgba(99,102,241,0.07); border:1px solid rgba(99,102,241,0.15);
  border-radius:10px; margin-bottom:24px; color:var(--text-secondary);
  font-size:13px; line-height:1.5;
}
.dp-info-banner svg { flex-shrink:0; color:#818cf8; }
.dp-info-banner code {
  background:rgba(255,255,255,0.06); padding:2px 6px; border-radius:4px;
  font-size:12px; color:#a5b4fc; font-family:monospace;
}

/* Grid */
.dp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

/* Loading */
.dp-loading { display:flex; align-items:center; justify-content:center; gap:12px; padding:60px; grid-column:1/-1; color:var(--text-secondary); font-size:14px; }
.dp-spinner { width:22px; height:22px; border:2px solid rgba(255,255,255,0.1); border-top-color:#6366f1; border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Empty */
.dp-empty { grid-column:1/-1; text-align:center; padding:60px 20px; }
.dp-empty svg { color:var(--text-tertiary); margin-bottom:12px; }
.dp-empty p { color:var(--text-tertiary); font-size:14px; margin:0; }

/* Cards */
.dp-card {
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:16px; padding:20px; display:flex; flex-direction:column;
  gap:14px; transition:all 0.25s; animation:dpFadeUp 0.4s cubic-bezier(0.16,1,0.3,1) both;
  position:relative; overflow:hidden;
}
.dp-card:hover { border-color:rgba(99,102,241,0.3); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }
.dp-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--dp-accent,#6366f1); opacity:0.7; border-radius:16px 16px 0 0; }

@keyframes dpFadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* Card header */
.dp-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dp-card-name { font-size:15px; font-weight:600; color:var(--text-primary); flex:1; min-width:0; line-height:1.3; }
.dp-type-badge {
  display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:20px; font-size:11px; font-weight:600;
  white-space:nowrap; flex-shrink:0;
}

/* URL row */
.dp-url-row { display:flex; align-items:center; gap:8px; }
.dp-url-path {
  font-family:monospace; font-size:12px; color:#a5b4fc;
  background:rgba(99,102,241,0.08); padding:5px 10px; border-radius:6px;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dp-icon-btn {
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05); border:1px solid var(--border-color);
  border-radius:8px; cursor:pointer; color:var(--text-secondary);
  transition:all 0.15s; flex-shrink:0;
}
.dp-icon-btn:hover { background:rgba(255,255,255,0.1); color:var(--text-primary); border-color:rgba(255,255,255,0.15); }
.dp-icon-btn.copied { background:rgba(16,185,129,0.12); color:#10b981; border-color:rgba(16,185,129,0.2); }

/* Fields */
.dp-fields-label { font-size:11px; font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.06em; }
.dp-fields-row { display:flex; flex-wrap:wrap; gap:5px; min-height:24px; }
.dp-field-pill {
  padding:3px 9px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07);
  border-radius:12px; font-size:11px; color:var(--text-secondary); font-family:monospace;
}

/* Card actions */
.dp-card-actions { display:flex; gap:8px; margin-top:auto; padding-top:4px; border-top:1px solid rgba(255,255,255,0.04); }
.dp-btn {
  flex:1; padding:8px; font-size:12px; font-weight:500; border-radius:8px;
  border:none; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
}
.dp-btn-edit { background:rgba(99,102,241,0.12); color:#818cf8; }
.dp-btn-edit:hover { background:rgba(99,102,241,0.2); }
.dp-btn-open { background:rgba(16,185,129,0.1); color:#10b981; }
.dp-btn-open:hover { background:rgba(16,185,129,0.18); }
.dp-btn-delete { background:rgba(239,68,68,0.08); color:#ef4444; }
.dp-btn-delete:hover { background:rgba(239,68,68,0.15); }

/* Modal fields */
.dp-modal-form { display:flex; flex-direction:column; gap:14px; }
.dp-modal-form .form-group { display:flex; flex-direction:column; }
.dp-modal-form label { font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:6px; }
.dp-modal-form input, .dp-modal-form select {
  padding:10px 14px; background:rgba(255,255,255,0.04); border:1px solid var(--border-color);
  border-radius:8px; color:var(--text-primary); font-size:13px; font-family:'Inter',sans-serif;
  outline:none; transition:border-color 0.2s; width:100%; box-sizing:border-box;
}
.dp-modal-form input:focus, .dp-modal-form select:focus { border-color:#6366f1; }
.dp-modal-form select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
  background-color:rgba(255,255,255,0.04);
}
.dp-modal-form select option { background:#1e1e2e; }
.dp-fields-hint { font-size:11px; color:var(--text-tertiary); margin-top:4px; }
.dp-tag-preview { display:flex; flex-wrap:wrap; gap:5px; min-height:24px; margin-top:6px; }

@media (max-width:600px) { .dp-grid { grid-template-columns:1fr; } .dp-header { flex-direction:column; } }

/* File Manager styles */
.dp-file-manager {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
}
.dfm-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.dfm-subtitle { font-size: 12px; color: var(--text-secondary); margin: 0 0 16px; }
.dfm-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.dfm-upload-zone {
  border: 2px dashed rgba(99,102,241,0.25);
  border-radius: 12px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,0.02);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.dfm-upload-zone:hover, .dfm-upload-zone.dragover {
  border-color: #6366f1;
  background: rgba(99,102,241,0.06);
}
.dfm-upload-zone svg { color: #818cf8; margin-bottom: 12px; }
.dfm-upload-text { font-size: 13px; color: var(--text-primary); font-weight: 500; margin-bottom: 4px; }
.dfm-browse { color: #818cf8; text-decoration: underline; }
.dfm-upload-subtext { font-size: 11px; color: var(--text-tertiary); }

.dfm-files-list-wrap { display: flex; flex-direction: column; min-height: 120px; }
.dfm-files-title { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.dfm-files-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 6px;
}
.dfm-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px 12px;
}
.dfm-file-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dfm-file-name { font-size: 12px; color: var(--text-primary); font-family: monospace; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.dfm-file-size { font-size: 10px; color: var(--text-tertiary); margin-left: 4px; }
.dfm-file-actions { display: flex; gap: 6px; }
.dfm-no-files { text-align: center; color: var(--text-tertiary); font-size: 12px; padding-top: 30px; font-style: italic; }

@media (max-width: 768px) {
  .dfm-body { grid-template-columns: 1fr; }
}