/* =========================================================
   RANDOM CHALLENGE ADMIN / إدارة فقرة التحدي
   SIMPLE PROFESSIONAL FINAL
   File: assets/admin/css/random-challenge-admin.css
========================================================= */

/* =========================
   1) ROOT
========================= */

.randomChallengeAdminPage{
  width:100%;
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:14px;
}

/* =========================
   2) TOP BAR
========================= */

.randomChallengeAdminTopBar{
  width:100%;
  min-width:0;

  margin:0;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);

  background:var(--admin-surface);

  box-shadow:
    0 10px 28px
    rgba(35,61,77,.06);

  padding:15px 18px;
}

.randomChallengeAdminPage
.adminEditorTitleBox{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:4px;
}

.randomChallengeAdminPage
.adminEditorTitleBox h2{
  margin:0;

  color:var(--admin-secondary);

  font-size:1.45rem;
  line-height:1.2;
  font-weight:400;
}

.randomChallengeAdminPage
.adminEditorTitleBox span{
  margin:0;

  color:var(--admin-muted);

  font-size:.82rem;
  line-height:1.35;
}

/* =========================
   3) SECTION TABS
========================= */

.randomChallengeAdminTabs{
  width:100%;
  min-width:0;

  padding:7px;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-5,5),minmax(0,1fr));

  gap:7px;

  border:1px solid var(--admin-line);
  border-radius:16px;

  background:var(--admin-surface);

  box-shadow:
    0 6px 18px
    rgba(35,61,77,.045);
}

.randomChallengeAdminTab{
  width:100%;
  min-width:0;

  height:46px;
  min-height:46px;

  margin:0;

  padding:8px 10px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid transparent;
  border-radius:11px;

  color:var(--admin-secondary);

  background:var(--admin-soft);

  font-size:.86rem;
  line-height:1.15;
  font-weight:400;

  text-align:center;

  white-space:nowrap;

  box-shadow:none;
}

.randomChallengeAdminTab:hover{
  transform:none;

  border-color:
    rgba(254,127,45,.28);

  background:var(--admin-primary-soft);
}

.randomChallengeAdminTab.active{
  color:#FFFFFF;

  border-color:var(--admin-secondary);

  background:var(--admin-secondary);

  box-shadow:none;
}

.randomChallengeAdminTab.active:hover{
  color:#FFFFFF;

  border-color:var(--admin-secondary-dark);

  background:var(--admin-secondary-dark);
}

/* =========================
   4) CONTENT
========================= */

.randomChallengeAdminContent{
  width:100%;
  min-width:0;

  padding:12px;

  border:1px solid var(--admin-line);
  border-radius:18px;

  background:var(--admin-surface);

  box-shadow:
    0 7px 20px
    rgba(35,61,77,.045);
}

/* =========================
   5) SHARED PLAYER
========================= */

.randomChallengeAdminContent
> .adminEmptyState{
  width:100%;

  min-height:180px;

  padding:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px dashed var(--admin-line);
  border-radius:14px;

  color:var(--admin-muted);

  background:var(--admin-soft);

  text-align:center;

  font-size:.92rem;
  line-height:1.5;
}

/* =========================
   6) QUESTION EDITOR
========================= */

.randomChallengeQuestionsEditor{
  width:100%;
  min-width:0;
}

.randomChallengeOnePageGrid{
  width:100%;
  min-width:0;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-3,3),minmax(0,1fr));

  gap:10px;

  align-items:start;
}

.randomChallengeOnePageGrid.hasOpenCard,
.randomChallengeOnePageGrid:has(
  .randomChallengeOnePageCard[open]
){
  grid-template-columns:1fr;
}

/* =========================
   7) QUESTION CARD
========================= */

.randomChallengeOnePageCard{
  width:100%;
  min-width:0;

  position:relative;

  scroll-margin-top:20px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);

  background:var(--admin-surface);

  box-shadow:
    0 6px 18px
    rgba(35,61,77,.045);

  overflow:hidden;

  transition:
    border-color .18s var(--admin-ease),
    box-shadow .18s var(--admin-ease);
}

.randomChallengeOnePageCard:hover{
  border-color:
    rgba(35,61,77,.22);

  box-shadow:
    0 9px 24px
    rgba(35,61,77,.065);
}

.randomChallengeOnePageCard[open]{
  grid-column:1 / -1;

  border-color:
    rgba(254,127,45,.36);

  box-shadow:
    0 14px 34px
    rgba(35,61,77,.08);
}

.randomChallengeOnePageCard.isDone{
  border-color:
    rgba(0,127,0,.28);
}

.randomChallengeOnePageCard.isMissing{
  border-color:
    rgba(127,0,0,.20);
}

/* =========================
   8) QUESTION ACCENT
========================= */

.randomChallengeOnePageCard::before{
  content:"";

  position:absolute;

  top:0;
  right:0;
  bottom:0;

  z-index:3;

  width:4px;

  background:var(--admin-primary);
}

.randomChallengeOnePageCard.isDone::before{
  background:var(--admin-green);
}

.randomChallengeOnePageCard.isMissing::before{
  background:var(--admin-red);
}

.randomChallengeOnePageCard[open]::before{
  width:5px;
}

/* =========================
   9) QUESTION SUMMARY
========================= */

.randomChallengeOnePageCard
> summary{
  width:100%;
  min-width:0;

  min-height:66px;

  padding:10px 14px 10px 16px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    auto;

  align-items:center;

  gap:9px;

  list-style:none;

  cursor:pointer;
  user-select:none;

  background:var(--admin-surface);
}

.randomChallengeOnePageCard
> summary::-webkit-details-marker{
  display:none;
}

.randomChallengeOnePageCard
> summary:hover{
  background:var(--admin-soft);
}

.randomChallengeOnePageCard[open]
> summary{
  border-bottom:1px solid var(--admin-line);

  background:#FBFCFD;
}

/* =========================
   10) QUESTION TITLE
========================= */

.randomChallengeOnePageCard
.adminEditItemTitle{
  min-width:0;

  display:flex;
  align-items:center;

  gap:9px;
}

.randomChallengeOnePageCard
.adminEditItemTitle::before{
  content:"";

  width:9px;
  height:9px;

  flex:0 0 9px;

  border-radius:50%;

  background:var(--admin-primary);
}

.randomChallengeOnePageCard.isDone
.adminEditItemTitle::before{
  background:var(--admin-green);
}

.randomChallengeOnePageCard.isMissing
.adminEditItemTitle::before{
  background:var(--admin-red);
}

.randomChallengeOnePageCard
.adminEditItemTitle strong{
  min-width:0;

  overflow:hidden;

  color:var(--admin-secondary);

  font-size:1.02rem;
  line-height:1.25;
  font-weight:400;

  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================
   11) QUESTION META
========================= */

.randomChallengeOnePageCard
.adminEditItemMeta{
  display:flex;
  align-items:center;

  gap:6px;
}

.randomChallengeOnePageCard
.adminEditStatusPill,
.randomChallengeOnePageCard
.adminEditProgressPill{
  min-width:54px;
  min-height:27px;

  padding:5px 8px;

  border-radius:999px;

  font-size:.72rem;
  line-height:1;
}

/* =========================
   12) QUESTION ARROW
========================= */

.randomChallengeOnePageCard
> summary::after{
  content:"⌄";

  width:31px;
  height:31px;
  min-width:31px;

  display:grid;
  place-items:center;

  border:1px solid var(--admin-line);
  border-radius:9px;

  color:var(--admin-secondary);

  background:var(--admin-soft);

  font-family:Arial,sans-serif;
  font-size:.92rem;
  line-height:1;

  transition:
    transform .18s var(--admin-ease),
    color .18s var(--admin-ease),
    background-color .18s var(--admin-ease);
}

.randomChallengeOnePageCard[open]
> summary::after{
  color:#FFFFFF;

  border-color:var(--admin-secondary);

  background:var(--admin-secondary);

  transform:rotate(180deg);
}

/* =========================
   13) QUESTION BODY
========================= */

.randomChallengeOnePageCard
> .adminEditItemBody{
  width:100%;
  min-width:0;

  padding:12px;

  display:flex;
  flex-direction:column;

  gap:10px;

  background:var(--admin-surface);
}

.randomChallengeOnePageCard:not([open])
> .adminEditItemBody{
  display:none !important;
}

/* =========================
   14) QUESTION FIELD
========================= */

.randomChallengeOnePageCard
.adminField{
  width:100%;
  min-width:0;

  margin:0;

  padding:9px;

  display:flex;
  flex-direction:column;

  gap:6px;

  border:1px solid var(--admin-line);
  border-radius:12px;

  background:var(--admin-soft);
}

.randomChallengeOnePageCard
.adminField textarea{
  width:100%;
  min-width:0;

  min-height:96px;
  max-height:220px;

  margin:0;

  padding:10px 12px;

  border:1px solid var(--admin-line);
  border-radius:10px;

  outline:0;

  color:var(--admin-text);

  background:#FFFFFF;

  resize:vertical;

  font-size:max(1rem,.94rem);
  line-height:1.5;
  font-weight:400;
}

.randomChallengeOnePageCard
.adminField textarea:focus{
  border-color:var(--admin-primary);

  box-shadow:
    0 0 0 4px
    rgba(254,127,45,.09);
}

.randomChallengeOnePageCard
.adminField.adminMissingField{
  border-color:
    rgba(127,0,0,.20);

  background:#FFFDFD;
}

.randomChallengeOnePageCard
.adminField.adminMissingField
textarea{
  border-color:
    rgba(127,0,0,.28);

  background:#FFF9F9;
}

.randomChallengeOnePageCard.isDone
.adminField:not(.adminMissingField){
  border-color:
    rgba(0,127,0,.18);
}

/* =========================
   15) TRUE / FALSE
========================= */

.randomChallengeTrueFalseOptions{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-2,2),minmax(0,1fr));

  gap:8px;
}

.randomChallengeTrueFalseBtn{
  width:100%;

  height:44px;
  min-height:44px;

  margin:0;

  padding:8px 12px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--admin-line);
  border-radius:10px;

  color:var(--admin-secondary);

  background:#FFFFFF;

  font-size:.9rem;
  line-height:1;
  font-weight:400;

  box-shadow:none;
}

.randomChallengeTrueFalseBtn:hover{
  transform:none;

  border-color:
    rgba(35,61,77,.28);

  background:var(--admin-soft);
}

.randomChallengeTrueFalseBtn.selected.correct{
  color:#FFFFFF;

  border-color:var(--admin-green);

  background:var(--admin-green);
}

.randomChallengeTrueFalseBtn.selected.wrong{
  color:#FFFFFF;

  border-color:var(--admin-red);

  background:var(--admin-red);
}

/* =========================
   16) QUESTION ITEM ACTIONS
========================= */

.randomChallengeOnePageCard
.randomChallengeItemActionsRow{
  width:100%;

  margin:0;

  display:grid !important;

  grid-template-columns:
    repeat(var(--admin-cols-2,2),minmax(0,1fr));

  gap:8px;
}

.randomChallengeOnePageCard
.randomChallengeItemActionsRow
> button{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;

  margin:0 !important;

  padding:8px 10px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  font-size:.82rem;
  line-height:1;

  white-space:nowrap;
}

.randomChallengeOnePageCard
.randomChallengeItemActionsRow
.adminSaveBtn{
  color:#FFFFFF;

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

  background:var(--admin-primary);

  box-shadow:none;
}

.randomChallengeOnePageCard
.randomChallengeItemActionsRow
.adminSaveBtn:hover{
  border-color:var(--admin-primary-hover);

  background:var(--admin-primary-hover);
}

.randomChallengeOnePageCard
.randomChallengeItemActionsRow
.adminDeleteMiniBtn{
  color:var(--admin-red);

  border:1px solid
    rgba(127,0,0,.15);

  background:var(--admin-red-soft);
}

.randomChallengeOnePageCard
.randomChallengeItemActionsRow
.adminDeleteMiniBtn:hover{
  color:#FFFFFF;

  border-color:var(--admin-red);

  background:var(--admin-red);
}

/* =========================================================
   FATBLA / فتبلة
========================================================= */

/* =========================
   17) FATBLA ROOT
========================= */

.fatblaAdminShell{
  width:100%;
  min-width:0;
}

.compactFatblaAdminShell{
  display:flex;
  flex-direction:column;

  gap:12px;
}

/* =========================
   18) FATBLA GRID
========================= */

.fatblaOnePageGrid{
  width:100%;
  min-width:0;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-2,2),minmax(0,1fr));

  gap:10px;

  align-items:start;
}

.fatblaOnePageGrid.hasOpenCard,
.fatblaOnePageGrid:has(
  .fatblaQuestionOnePageCard[open]
){
  grid-template-columns:1fr;
}

/* =========================
   19) FATBLA CARD
========================= */

.fatblaQuestionOnePageCard{
  width:100%;
  min-width:0;

  position:relative;

  scroll-margin-top:20px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);

  background:var(--admin-surface);

  box-shadow:
    0 6px 18px
    rgba(35,61,77,.045);

  overflow:hidden;

  transition:
    border-color .18s var(--admin-ease),
    box-shadow .18s var(--admin-ease);
}

.fatblaQuestionOnePageCard:hover{
  border-color:
    rgba(35,61,77,.22);

  box-shadow:
    0 9px 24px
    rgba(35,61,77,.065);
}

.fatblaQuestionOnePageCard[open]{
  grid-column:1 / -1;

  border-color:
    rgba(254,127,45,.36);

  box-shadow:
    0 14px 34px
    rgba(35,61,77,.08);
}

.fatblaQuestionOnePageCard.isDone{
  border-color:
    rgba(0,127,0,.28);
}

.fatblaQuestionOnePageCard.isMissing{
  border-color:
    rgba(127,0,0,.20);
}

/* =========================
   20) FATBLA ACCENT
========================= */

.fatblaQuestionOnePageCard::before{
  content:"";

  position:absolute;

  top:0;
  right:0;
  bottom:0;

  z-index:3;

  width:4px;

  background:var(--admin-primary);
}

.fatblaQuestionOnePageCard.isDone::before{
  background:var(--admin-green);
}

.fatblaQuestionOnePageCard.isMissing::before{
  background:var(--admin-red);
}

.fatblaQuestionOnePageCard[open]::before{
  width:5px;
}

/* =========================
   21) FATBLA SUMMARY
========================= */

.fatblaQuestionOnePageCard
> summary{
  width:100%;
  min-width:0;

  min-height:66px;

  padding:10px 14px 10px 16px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    auto;

  align-items:center;

  gap:9px;

  list-style:none;

  cursor:pointer;
  user-select:none;

  background:var(--admin-surface);
}

.fatblaQuestionOnePageCard
> summary::-webkit-details-marker{
  display:none;
}

.fatblaQuestionOnePageCard
> summary:hover{
  background:var(--admin-soft);
}

.fatblaQuestionOnePageCard[open]
> summary{
  border-bottom:1px solid var(--admin-line);

  background:#FBFCFD;
}

/* =========================
   22) FATBLA TITLE
========================= */

.fatblaQuestionOnePageCard
.adminEditItemTitle{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:2px;
}

.fatblaQuestionOnePageCard
.adminEditItemTitle strong{
  min-width:0;

  overflow:hidden;

  color:var(--admin-secondary);

  font-size:1.02rem;
  line-height:1.25;
  font-weight:400;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.fatblaQuestionOnePageCard
.adminEditItemTitle span{
  min-width:0;

  overflow:hidden;

  color:var(--admin-muted);

  font-size:.76rem;
  line-height:1.25;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.fatblaQuestionOnePageCard.isDone
.adminEditItemTitle span{
  color:var(--admin-green);
}

.fatblaQuestionOnePageCard.isMissing
.adminEditItemTitle span{
  color:var(--admin-red);
}

/* =========================
   23) FATBLA META
========================= */

.fatblaQuestionOnePageCard
.adminEditItemMeta{
  display:flex;
  align-items:center;

  gap:6px;
}

.fatblaQuestionOnePageCard
.adminEditStatusPill,
.fatblaQuestionOnePageCard
.adminEditProgressPill{
  min-width:54px;
  min-height:27px;

  padding:5px 8px;

  border-radius:999px;

  font-size:.72rem;
  line-height:1;
}

/* =========================
   24) FATBLA ARROW
========================= */

.fatblaQuestionOnePageCard
> summary::after{
  content:"⌄";

  width:31px;
  height:31px;
  min-width:31px;

  display:grid;
  place-items:center;

  border:1px solid var(--admin-line);
  border-radius:9px;

  color:var(--admin-secondary);

  background:var(--admin-soft);

  font-family:Arial,sans-serif;
  font-size:.92rem;
  line-height:1;

  transition:
    transform .18s var(--admin-ease),
    color .18s var(--admin-ease),
    background-color .18s var(--admin-ease);
}

.fatblaQuestionOnePageCard[open]
> summary::after{
  color:#FFFFFF;

  border-color:var(--admin-secondary);

  background:var(--admin-secondary);

  transform:rotate(180deg);
}

/* =========================
   25) FATBLA BODY
========================= */

.fatblaQuestionOnePageCard
> .adminEditItemBody{
  width:100%;
  min-width:0;

  padding:12px;

  background:var(--admin-surface);
}

.fatblaQuestionOnePageCard:not([open])
> .adminEditItemBody{
  display:none !important;
}

/* =========================
   26) FATBLA LAYOUT
   50% MEDIA + 50% ANSWER
========================= */

.fatblaOnePageLayout{
  width:100%;
  min-width:0;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-2,2),minmax(0,1fr));

  gap:10px;

  align-items:stretch;
}

.fatblaOnePageLayoutAnswerOnly{
  position:relative;
}

/* =========================
   27) FATBLA MEDIA
========================= */

.fatblaOnePageMedia{
  width:100%;
  min-width:0;
  height:100%;
  min-height:370px;

  padding:9px;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-2,2),minmax(0,1fr));

  grid-template-areas:
    "image video"
    "hint hint"
    "preview preview";

  grid-template-rows:
    auto
    auto
    minmax(220px,1fr);

  gap:8px;

  border:1px solid var(--admin-line);
  border-radius:13px;

  background:var(--admin-soft);
}

.fatblaOnePageMedia
.adminField{
  width:100%;
  min-width:0;

  margin:0;

  padding:8px;

  display:flex;
  flex-direction:column;

  gap:5px;

  border:1px solid var(--admin-line);
  border-radius:10px;

  background:#FFFFFF;
}

.fatblaOnePageMedia
.adminField:first-child{
  grid-area:image;
}

.fatblaOnePageMedia
.adminField:nth-child(2){
  grid-area:video;
}

.fatblaOnePageMedia
.adminField label{
  margin:0;

  color:var(--admin-secondary);

  font-size:.76rem;
  line-height:1.2;
}

.fatblaOnePageMedia
input[type="file"]{
  width:100%;
  min-width:0;

  min-height:46px;

  margin:0;
}

.fatblaOnePageMedia
> .adminMissingHint{
  grid-area:hint;

  margin:0;
}

/* =========================
   28) FATBLA PREVIEW
========================= */

.fatblaPreviewBox.fatblaPreviewLarge{
  grid-area:preview;

  width:100%;
  min-width:0;

  height:240px;
  min-height:240px;
  max-height:240px;

  position:relative;

  padding:8px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--admin-line);
  border-radius:11px;

  overflow:hidden;

  background:#EEF1F3;
}

.fatblaPreviewBox::before{
  content:"معاينة";

  position:absolute;

  top:7px;
  right:7px;

  z-index:3;

  min-height:24px;

  padding:4px 8px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid
    rgba(35,61,77,.12);

  border-radius:999px;

  color:var(--admin-secondary);

  background:
    rgba(255,255,255,.94);

  font-size:.66rem;
  line-height:1;

  pointer-events:none;
}

/* الصورة والفيديو كاملان بدون قص */

.randomChallengeAdminPage
.fatblaPreviewBox
.previewImg{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:100% !important;
  max-height:100% !important;

  margin:0 !important;

  object-fit:contain !important;
  object-position:center center !important;

  transform:none !important;

  background:transparent;
}

.randomChallengeAdminPage
.fatblaPreviewBox
video.previewImg{
  background:#151515;
}

/* =========================
   29) FATBLA EMPTY PREVIEW
========================= */

.fatblaPreviewBox
.emptyImageHint{
  width:100%;
  height:100%;

  margin:0;

  padding:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--admin-muted);

  text-align:center;

  font-size:.8rem;
  line-height:1.35;
}

/* =========================
   30) FATBLA ANSWER SIDE
========================= */

.fatblaOnePageFields{
  width:100%;
  min-width:0;
  height:100%;
  min-height:370px;

  padding:9px;

  display:flex;
  flex-direction:column;

  gap:8px;

  border:1px solid var(--admin-line);
  border-radius:13px;

  background:var(--admin-soft);
}

.fatblaOnePageFields::before,
.fatblaOnePageFields::after{
  content:none !important;

  display:none !important;
}

/* =========================
   31) FATBLA ANSWER FIELD
========================= */

.fatblaOnePageFields
> .adminField{
  width:100%;
  min-width:0;

  margin:0;

  padding:11px;

  flex:1 1 auto;

  display:flex;
  flex-direction:column;

  gap:7px;

  border:1px solid var(--admin-line);
  border-radius:11px;

  background:#FFFFFF;
}

.fatblaOnePageFields
> .adminField label{
  margin:0;

  color:var(--admin-secondary);

  font-size:.8rem;
  line-height:1.2;
}

.fatblaOnePageFields
> .adminField input{
  width:100%;
  min-width:0;

  height:52px;
  min-height:52px;

  margin:0;

  padding:9px 12px;

  border:1px solid var(--admin-line);
  border-radius:10px;

  outline:0;

  color:var(--admin-secondary);

  background:#FFFFFF;

  font-size:max(1rem,.96rem);
  line-height:1.3;
  font-weight:400;
}

.fatblaOnePageFields
> .adminField input:focus{
  border-color:var(--admin-primary);

  box-shadow:
    0 0 0 4px
    rgba(254,127,45,.09);
}

.fatblaOnePageFields
> .adminField.adminMissingField{
  border-color:
    rgba(127,0,0,.18);

  background:#FFFDFD;
}

.fatblaOnePageFields
> .adminField.adminMissingField
input{
  border-color:
    rgba(127,0,0,.28);

  background:#FFF9F9;
}

/* =========================
   32) MISSING HINT
========================= */

.randomChallengeAdminPage
.adminMissingHint{
  width:100%;

  padding:6px 8px;

  border:1px solid
    rgba(127,0,0,.12);

  border-radius:8px;

  color:var(--admin-red);

  background:var(--admin-red-soft);

  font-size:.72rem;
  line-height:1.3;
}

/* =========================
   33) FATBLA ITEM ACTIONS
========================= */

.fatblaOnePageFields
.fatblaItemActionsRow{
  width:100%;
  min-width:0;

  margin:0;
  margin-top:auto;

  display:grid !important;

  grid-template-columns:
    repeat(var(--admin-cols-2,2),minmax(0,1fr));

  gap:8px;

  flex:0 0 auto;
}

.fatblaOnePageFields
.fatblaItemActionsRow
> button{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;

  margin:0 !important;

  padding:8px 10px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  font-size:.82rem;
  line-height:1;

  white-space:nowrap;
}

.fatblaOnePageFields
.fatblaItemActionsRow
.adminSaveBtn{
  color:#FFFFFF;

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

  background:var(--admin-primary);

  box-shadow:none;
}

.fatblaOnePageFields
.fatblaItemActionsRow
.adminSaveBtn:hover{
  border-color:var(--admin-primary-hover);

  background:var(--admin-primary-hover);
}

.fatblaOnePageFields
.fatblaItemActionsRow
.adminDeleteBtn{
  color:var(--admin-red);

  border:1px solid
    rgba(127,0,0,.15);

  background:var(--admin-red-soft);

  box-shadow:none;
}

.fatblaOnePageFields
.fatblaItemActionsRow
.adminDeleteBtn:hover{
  color:#FFFFFF;

  border-color:var(--admin-red);

  background:var(--admin-red);
}

/* =========================
   34) COMPLETE FATBLA
========================= */

.fatblaQuestionOnePageCard.isDone
.fatblaOnePageMedia,
.fatblaQuestionOnePageCard.isDone
.fatblaOnePageFields{
  border-color:
    rgba(0,127,0,.20);
}

/* =========================
   35) BOTTOM ACTIONS
   SAVE SECTION + DELETE SECTION
========================= */

.randomChallengeAdminActions{
  width:100%;
  min-width:0;

  padding:10px;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-2,2),minmax(0,1fr));

  gap:8px;

  border:1px solid var(--admin-line);
  border-radius:15px;

  background:var(--admin-surface);

  box-shadow:
    0 6px 18px
    rgba(35,61,77,.045);
}

.randomChallengeAdminActions
> button{
  width:100%;
  min-width:0;
  max-width:none;

  height:46px;
  min-height:46px;
  max-height:46px;

  margin:0;

  padding:8px 12px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  font-size:.86rem;
  line-height:1;

  white-space:nowrap;
}

.randomChallengeAdminActions
.adminBtnMango{
  color:#FFFFFF;

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

  background:var(--admin-primary);

  box-shadow:none;
}

.randomChallengeAdminActions
.adminBtnMango:hover{
  border-color:var(--admin-primary-hover);

  background:var(--admin-primary-hover);
}

.randomChallengeAdminActions
.adminBtnDanger{
  color:var(--admin-red);

  border:1px solid
    rgba(127,0,0,.15);

  background:var(--admin-red-soft);

  box-shadow:none;
}

.randomChallengeAdminActions
.adminBtnDanger:hover{
  color:#FFFFFF;

  border-color:var(--admin-red);

  background:var(--admin-red);
}

/* =========================
   36) SAVING STATE
========================= */

.adminIsSaving
.randomChallengeAdminPage{
  pointer-events:none;
}

.adminIsSaving
.randomChallengeAdminTopBar{
  pointer-events:auto;
}

.adminIsSaving
.randomChallengeOnePageCard,
.adminIsSaving
.fatblaQuestionOnePageCard{
  opacity:.72;
}

/* =========================
   37) FALLBACK
========================= */

@supports not selector(:has(*)){

  .randomChallengeOnePageGrid{
    grid-template-columns:
      repeat(var(--admin-cols-3,3),minmax(0,1fr));
  }

  .randomChallengeOnePageGrid.hasOpenCard{
    grid-template-columns:1fr;
  }

  .randomChallengeOnePageCard[open]{
    grid-column:1 / -1;
  }

  .fatblaOnePageGrid{
    grid-template-columns:
      repeat(var(--admin-cols-2,2),minmax(0,1fr));
  }

  .fatblaOnePageGrid.hasOpenCard{
    grid-template-columns:1fr;
  }

  .fatblaQuestionOnePageCard[open]{
    grid-column:1 / -1;
  }
}