/* =====================================================
   NIA INVITE — DESIGNS MANAGEMENT
   Visual language follows Affiliates / Orders modules.
   ===================================================== */

.designs-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}


/* =====================================================
   CONTROLS
   ===================================================== */

.designs-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;

  background: rgba(14, 16, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);

  padding: 12px;
  border-radius: 14px;

  backdrop-filter: blur(10px);
}


.designs-filter-row {
  grid-template-columns:
    repeat(3, 1fr);
}


/* =====================================================
   CONTENT
   ===================================================== */

.designs-content {
  width: 100%;
}


.designs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* =====================================================
   DESIGN CARD
   ===================================================== */

.design-card {

  background:
    linear-gradient(
      145deg,
      #131620 0%,
      #0c0e14 100%
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  padding: 18px;

  display: flex;
  flex-direction: column;

  gap: 14px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.4);

  position: relative;

  overflow: hidden;

  text-align: left;
}


.design-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 3px;
  height: 100%;

  background: var(--gold);

}


.design-card.inactive::before {
  background: var(--muted);
}


/* =====================================================
   CARD TOP
   ===================================================== */

.design-card-top {

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 10px;

  width: 100%;
}


.design-info {

  display: flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  text-align:
    left;

  gap: 4px;

  flex: 1;

  min-width: 0;
}


.design-name {

  font-size: 1rem;

  font-weight: 700;

  color: #fff;

  line-height: 1.2;

  margin: 0;
}


.design-tags {

  display: flex;

  align-items:
    center;

  gap: 8px;

  margin-top: 2px;

  flex-wrap: wrap;
}


.design-id-tag {

  font-family:
    monospace,
    monospace;

  font-size: 0.7rem;

  color:
    var(--gold-glow);

  background:
    rgba(212, 175, 55, 0.1);

  border:
    1px solid
    rgba(212, 175, 55, 0.25);

  padding: 2px 7px;

  border-radius: 6px;
}


.design-slug-tag {

  font-family:
    monospace,
    monospace;

  font-size: 0.7rem;

  color: #aeb5c7;

  background:
    rgba(255, 255, 255, 0.04);

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  padding: 2px 7px;

  border-radius: 6px;

  word-break:
    break-all;
}


.design-detail-code {

  display: inline-block;

  margin-top: 5px;

  font-family:
    monospace,
    monospace;

  font-size: 0.72rem;

  color:
    var(--gold-glow);
}


/* =====================================================
   PREVIEW
   ===================================================== */

.design-preview {

  min-height: 170px;

  border-radius: 12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.05);

  background:

    radial-gradient(
      circle at 50% 45%,
      rgba(212, 175, 55, 0.10),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      #090a0f 0%,
      #07080c 100%
    );

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  position:
    relative;

  overflow:
    hidden;
}


.design-preview::after {

  content: "";

  position:
    absolute;

  inset: 14px;

  border:
    1px solid
    rgba(212, 175, 55, 0.08);

  border-radius: 10px;

  pointer-events:
    none;
}


.design-preview-glow {

  position:
    absolute;

  width: 100px;
  height: 100px;

  border-radius: 50%;

  background:
    rgba(212, 175, 55, 0.08);

  filter:
    blur(30px);
}


.design-preview-icon {

  position:
    relative;

  z-index: 2;

  color:
    var(--gold);

  font-size:
    2rem;

  line-height:
    1;

  text-shadow:
    0 0 18px
    rgba(212, 175, 55, 0.35);
}


.design-preview-label {

  position:
    relative;

  z-index: 2;

  margin-top:
    12px;

  color:
    var(--muted);

  font-size:
    0.62rem;

  font-weight:
    800;

  letter-spacing:
    1.3px;
}


/* =====================================================
   DETAILS
   ===================================================== */

.design-details-stack {

  display: flex;

  flex-direction:
    column;

  gap: 8px;

  background:
    rgba(0, 0, 0, 0.35);

  padding:
    12px 14px;

  border-radius:
    12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.04);
}


.design-detail-row {

  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  font-size:
    0.78rem;

  gap:
    12px;
}


.design-detail-label {

  color:
    var(--muted);

  font-size:
    0.7rem;

  display:
    inline-flex;

  align-items:
    center;

  flex-shrink:
    0;

  text-transform:
    uppercase;

  letter-spacing:
    0.5px;
}


.design-detail-val {

  color:
    #f3f4f6;

  font-weight:
    500;

  text-align:
    right;

  word-break:
    break-word;

  max-width:
    70%;
}


.design-detail-val.muted {
  color:
    var(--muted);
}


/* =====================================================
   ACTIONS
   ===================================================== */

.design-actions {

  display: flex;

  gap: 8px;

  flex-wrap:
    wrap;
}


.design-actions .btn-action {

  flex: 1;

  min-width:
    80px;
}


.btn-action.edit {

  border-color:
    rgba(59, 130, 246, 0.3);

  color:
    #60a5fa;

  background:
    rgba(59, 130, 246, 0.05);
}


.btn-action.toggle-inactive {

  color:
    #f87171;

  border-color:
    rgba(239, 68, 68, 0.25);

  background:
    rgba(239, 68, 68, 0.04);
}


.btn-action.toggle-active {

  color:
    #34d399;

  border-color:
    rgba(16, 185, 129, 0.25);

  background:
    rgba(16, 185, 129, 0.04);
}


/* =====================================================
   LOADING / EMPTY / ERROR
   ===================================================== */

.designs-loading,
.designs-empty,
.designs-error {

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  padding:
    32px 16px;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    0.85rem;
}


.designs-empty-icon {

  color:
    var(--gold);

  font-size:
    1.6rem;

  margin-bottom:
    8px;
}


.designs-empty-title {

  color:
    #fff;

  font-size:
    0.9rem;

  font-weight:
    700;
}


.designs-empty-sub {

  margin-top:
    5px;

  color:
    var(--muted);

  font-size:
    0.75rem;
}


.designs-error {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  color:
    var(--danger);
}


.designs-error strong {
  color:
    var(--danger);
}


.designs-error span {
  color:
    var(--muted);
}


/* =====================================================
   STATUS
   ===================================================== */

.badge-inactive {

  background:
    rgba(255, 255, 255, 0.05);

  color:
    var(--muted);

  border:
    1px solid
    rgba(255, 255, 255, 0.12);
}


/* =====================================================
   MODAL
   ===================================================== */

.design-modal-head {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    12px;

  margin-bottom:
    18px;
}


.design-modal-sub {

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    0.72rem;
}


.design-close-btn {

  flex:
    unset !important;

  min-width:
    unset !important;

  padding:
    5px 10px;
}


.design-form-help {

  display:
    block;

  margin-top:
    5px;

  color:
    #62697b;

  font-size:
    0.68rem;

  line-height:
    1.4;
}


.design-optional {

  color:
    #62697b;

  font-weight:
    500;
}


.design-stats-grid {

  grid-template-columns:
    repeat(2, 1fr);

  margin-bottom:
    16px;
}


.metric-success {
  color:
    #34d399 !important;
}


.metric-muted {
  color:
    var(--muted) !important;
}


.design-detail-block {

  background:
    rgba(10, 12, 18, 0.85);

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius:
    12px;

  padding:
    14px;

  margin-bottom:
    12px;
}


.design-detail-block-title {

  color:
    var(--muted);

  font-size:
    0.68rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.7px;

  font-weight:
    700;

  margin-bottom:
    9px;
}


.design-detail-description {

  color:
    #f3f4f6;

  font-size:
    0.8rem;

  line-height:
    1.5;

  white-space:
    pre-wrap;
}


.design-template-url {

  color:
    var(--gold-glow);

  font-family:
    monospace,
    monospace;

  font-size:
    0.7rem;

  line-height:
    1.5;

  word-break:
    break-all;
}


.design-detail-meta {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    10px;
}


.design-detail-meta > div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.design-detail-meta span {

  color:
    var(--muted);

  font-size:
    0.62rem;

  letter-spacing:
    0.7px;

  font-weight:
    700;
}


.design-detail-meta strong {

  color:
    #f3f4f6;

  font-size:
    0.75rem;
}


/* =====================================================
   FORM
   ===================================================== */

#modal-design-form .form-group {
  margin-bottom:
    14px;
}


#modal-design-form .form-group label {

  display:
    block;

  color:
    var(--muted);

  font-size:
    0.72rem;

  font-weight:
    700;

  margin-bottom:
    6px;
}


#modal-design-form .form-group input,
#modal-design-form .form-group textarea {

  width:
    100%;

  background:
    #090a0f;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    10px;

  color:
    #fff;

  font-size:
    0.8rem;

  padding:
    10px 11px;

  outline:
    none;

  font-family:
    inherit;

  resize:
    vertical;

  transition:
    all 0.2s ease;
}


#modal-design-form .form-group input:focus,
#modal-design-form .form-group textarea:focus {

  border-color:
    rgba(212, 175, 55, 0.4);

  background:
    #0d0f17;

  box-shadow:
    0 0 14px
    rgba(212, 175, 55, 0.12);
}


#modal-design-form .modal-footer {
  margin-top:
    18px;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 480px) {

  .design-card {
    padding:
      16px;
  }


  .design-preview {
    min-height:
      150px;
  }


  .design-actions {

    display:
      grid;

    grid-template-columns:
      repeat(2, 1fr);
  }


  .design-actions .btn-action {
    min-width:
      0;
  }


  .design-detail-row {
    align-items:
      flex-start;
  }


  .design-detail-val {
    max-width:
      62%;
  }


  .design-detail-meta {
    grid-template-columns:
      1fr;
  }

}