/*
  MyList — fresh, responsive, scoped styles
  Only affects the MyList page via the .mylist-page wrapper.
*/

:root {
  --ml-bg: #ffffff;
  --ml-surface: #f7f8fb;
  --ml-card: #ffffff;
  --ml-border: #e6e8ef;
  --ml-text: #0b1220;
  --ml-muted: #667085;
  --ml-accent: #6ea8fe;     /* softer blue */
  --ml-accent-600: #4c89f5; /* soft hover */
  --ml-accent-soft: #f2f6ff;/* very light */
  --ml-success: #16a34a;
  --ml-danger: #ef4444;
  --ml-radius: 14px;
  --ml-shadow-sm: 0 1px 2px rgba(2,6,23,.04);
}

.mylist-page { background: var(--ml-bg); }

/* Card frame */
.mylist-page .mylist-card,
.mylist-page .mylist-info-card,
.mylist-page .download-app-card {
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  background: var(--ml-card);
  box-shadow: var(--ml-shadow-sm);
}
.mylist-page .mylist-card { margin-bottom: 16px; }
.mylist-page .card-header {
  background: var(--ml-card);
  border-bottom: 1px solid var(--ml-border);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mylist-page .card-header i { color: var(--ml-accent-600); }
.mylist-page .card-body { background: var(--ml-card); padding: 18px; }
.mylist-page .card-header h3, .mylist-page .card-header h5 { font-weight: 700; letter-spacing: .2px; }

/* Two info cards — zero gutter to sit close */
.mylist-info-row { --bs-gutter-x: .75rem; --bs-gutter-y: .25rem; }

/* Upload steps */
.mylist-page .ml-instructions { display: flex; flex-direction: column; gap: 10px; }
.mylist-page .ml-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--ml-surface); border: 1px solid var(--ml-border);
  border-radius: 12px; padding: 12px 14px;
}
.mylist-page .ml-badge {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--ml-accent-soft); color: var(--ml-accent-600);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; border: 1px solid #e5edff;
}
.mylist-page .ml-step-title { font-weight: 700; color: var(--ml-text); }
.mylist-page .ml-step-text { color: var(--ml-muted); font-size: .92rem; margin-top: 2px; }

/* Specs grid */
/* Compact table (used for steps and specs) */
.mylist-page .ml-table { border: 1px solid var(--ml-border); border-radius: 12px; overflow: hidden; background: #fff; }
.mylist-page .ml-tr { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ml-border); align-items: center; }
.mylist-page .ml-tr:last-child { border-bottom: 0; }
.mylist-page .ml-th { font-weight: 700; color: #111827; }
.mylist-page .ml-td { color: var(--ml-text); }
.mylist-page .ml-td .small { color: var(--ml-muted) !important; }
.mylist-page .ml-tr:hover { background: #fafcff; }
@media (max-width: 576px) {
  .mylist-page .ml-tr { grid-template-columns: 1fr; }
  .mylist-page .ml-th { margin-bottom: 4px; color: var(--ml-muted); }
}

/* Add playlist button */
.mylist-page .add-playlist {
  margin-top: 10px; border: 1px dashed var(--ml-border); border-radius: 12px;
  padding: 12px; text-align: center; color: var(--ml-muted); cursor: pointer;
}
.mylist-page .add-playlist:hover { background: var(--ml-surface); color: var(--ml-accent-600); }

/* Inputs & buttons */
.mylist-page .form-control { border: 1px solid var(--ml-border); border-radius: 12px; padding: 12px 14px; }
.mylist-page .form-control:focus { border-color: var(--ml-accent-600); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.mylist-page .mac-address {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .5px;
}
.mylist-page .text-input.error { border-color: var(--ml-danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }

.mylist-page .btn { border-radius: 12px; }
.mylist-page .btn-primary { background: var(--ml-accent); border-color: var(--ml-accent-600); transition: all .15s ease; }
.mylist-page .btn-primary:hover { filter: brightness(.98); }
.mylist-page .btn-danger { background: var(--ml-danger); border-color: var(--ml-danger); }
.mylist-page .btn-danger:hover { filter: brightness(.95); }

/* Download app */
.mylist-page .download-app-card .app-icon {
  width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--ml-border);
  background: var(--ml-accent-soft); color: var(--ml-accent-600);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}

/* Popup */
.popup-overlay, .custom-popup-overlay {
  position: fixed; inset: 0; background: rgba(2,6,23,.6); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; z-index: 1060;
}
.popup-overlay.show, .custom-popup-overlay.show { display: flex; }
.popup-container, .custom-popup {
  width: 420px; max-width: calc(100% - 32px); background: #fff; border: 1px solid var(--ml-border);
  border-radius: 16px; overflow: hidden;
}
.popup-header, .custom-popup-header { padding: 14px 18px; border-bottom: 1px solid var(--ml-border); background: #fff; display: flex; align-items: center; gap: 12px; }
.popup-title, .custom-popup-title { margin: 0; font-weight: 700; color: var(--ml-text); }
.popup-content, .custom-popup-body { padding: 16px; color: var(--ml-muted); }
.popup-actions, .custom-popup-footer { padding: 12px 16px; border-top: 1px solid var(--ml-border); display: flex; gap: 10px; justify-content: flex-end; }
.popup-btn { border: 1px solid var(--ml-border); background: #fff; color: var(--ml-text); border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.popup-btn:hover { background: #f9fafb; }
.popup-btn-delete { background: var(--ml-danger); border-color: var(--ml-danger); color: #fff; }
.popup-btn-delete:hover { filter: brightness(.95); }

/* Mobile primary button full width for better UX */
@media (max-width: 576px){
  .mylist-page .btn.btn-lg { width: 100%; }
}