/* ============================================================================
   NewsFirst — Just In Timeline form restyle (design-system reference look)
   CSS-only; keeps the CURRENT colour scheme (green accent #34c38f), only the
   layout/controls are modernised. Loaded last so it wins over the theme.
   Scoped to the timeline form's own classes (.checkboxbg, .box-time-table) so
   it never touches other pages' checkboxes.
   To revert: remove the <link> to this file in layouts/head.blade.php.
   ============================================================================ */

/* ---- Checkboxes -> iOS-style toggle switches ---------------------------- */
input.checkboxbg[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 38px !important;
  height: 22px !important;
  min-width: 38px !important;
  margin: 7px 10px 7px 0 !important;
  padding: 0 !important;
  background: #d9d5cc !important;
  border: 1.5px solid #c6c2b8 !important;
  border-radius: 22px !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
input.checkboxbg[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
  transition: transform 0.15s ease !important;
}
input.checkboxbg[type="checkbox"]:checked {
  background: #34c38f !important;   /* existing app green — colour unchanged */
  border-color: #34c38f !important;
}
input.checkboxbg[type="checkbox"]:checked::after {
  transform: translateX(16px) !important;
}
input.checkboxbg[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(52, 195, 143, 0.18) !important;
}

/* Label sits inline with the switch, a touch more breathing room per row */
input.checkboxbg[type="checkbox"] + label {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 22px !important;
}
input.checkboxbg[type="checkbox"] {
  vertical-align: middle !important;
}

/* ==========================================================================
   Reference layout applied to the Story Form (scoped to #justin_timeline_justin_form
   so no other page is touched). Structure only — colours stay as they are:
   white cards, current green accent, no theme/hue change.
   ========================================================================== */

/* ---- Cards: soft radius, subtle border + shadow, roomy padding ---------- */
#justin_timeline_justin_form .card {
  border: 1px solid #e5e1d8 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.14s !important;
}
#justin_timeline_justin_form .card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}
#justin_timeline_justin_form .card > .card-body { padding: 24px !important; }

/* ---- Card titles: 15px bold with a full-width divider underneath -------- */
#justin_timeline_justin_form .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
}
/* A divider line under the first (title) row of each card body, like the reference */
#justin_timeline_justin_form .card > .card-body > .row:first-child {
  border-bottom: 1px solid #e5e1d8 !important;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}

/* ---- Field labels: uppercase, muted, small (e.g. CATEGORY TAG) ---------- */
#justin_timeline_justin_form .form-group > label,
#justin_timeline_justin_form label.control-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.9px !important;
  color: #9a9690 !important;
  margin: 0 0 8px !important;
}
/* keep the toggle labels normal (not uppercase/muted) */
#justin_timeline_justin_form input.checkboxbg[type="checkbox"] + label {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  margin: 0 !important;
}

/* ---- Inputs / selects: rounded, clean border, neutral focus ring -------- */
#justin_timeline_justin_form .form-control,
#justin_timeline_justin_form select.form-control,
#justin_timeline_justin_form textarea.form-control,
#justin_timeline_justin_form .select2-container .select2-selection {
  border: 1px solid #d6d1c8 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  min-height: 42px !important;
  box-shadow: none !important;
}
#justin_timeline_justin_form .form-control:focus,
#justin_timeline_justin_form select.form-control:focus,
#justin_timeline_justin_form textarea.form-control:focus {
  border-color: #1a1a24 !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 36, 0.08) !important;
}
#justin_timeline_justin_form textarea.form-control { min-height: 100px !important; }

/* ---- Aspect-ratio pills (.selectratio) — rounded, dark active ----------- */
#justin_timeline_justin_form .selectratio.ratio-btn {
  border: 1.5px solid #d6d1c8 !important;
  border-radius: 100px !important;
  min-width: 44px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 15px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 0 6px 0 0 !important;
  transition: border-color .14s, background .14s, color .14s !important;
}
#justin_timeline_justin_form .selectratio.ratio-btn:not(.active) {
  background: #fff !important;
  color: #6b695f !important;
}
#justin_timeline_justin_form .selectratio.ratio-btn:not(.active):hover {
  border-color: #1a1a24 !important;
  color: #1a1a24 !important;
}
/* Active = dark filled pill (matches the reference image) */
#justin_timeline_justin_form .selectratio.ratio-btn.active {
  background: #1a1a24 !important;
  border-color: #1a1a24 !important;
  color: #fff !important;
}
#justin_timeline_justin_form .selectratio.ratio-btn span { color: inherit !important; }

/* ---- Source radios (Select / Upload) -> big card buttons ---------------- */
#justin_timeline_justin_form [name="selectImageTypeImageOrVideoDivId"] label.radio-inline.control-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 46% !important;
  border: 1.5px solid #d6d1c8 !important;
  border-radius: 10px !important;
  padding: 13px 18px !important;
  margin: 0 2% 8px 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a24 !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color .14s, box-shadow .14s !important;
}
#justin_timeline_justin_form [name="selectImageTypeImageOrVideoDivId"] label.radio-inline.control-label input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 2px solid #c4bfb6 !important;
  border-radius: 50% !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
#justin_timeline_justin_form [name="selectImageTypeImageOrVideoDivId"] label.radio-inline.control-label input[type="radio"]:checked {
  border-color: #1a1a24 !important;
}
#justin_timeline_justin_form [name="selectImageTypeImageOrVideoDivId"] label.radio-inline.control-label input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: 50% !important;
  background: #1a1a24 !important;
}
#justin_timeline_justin_form [name="selectImageTypeImageOrVideoDivId"] label.radio-inline.control-label:has(input:checked) {
  border-color: #1a1a24 !important;
  box-shadow: inset 0 0 0 1px #1a1a24 !important;
}

/* ---- File inputs (.custom-file) -> dashed, thumbnail + Browse ----------- */
#justin_timeline_justin_form .custom-file { height: 46px !important; }
#justin_timeline_justin_form .custom-file .custom-file-label {
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  border: 1.5px dashed #d6d1c8 !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  color: #9a9690 !important;
  background: #fff !important;
  padding: 0 10px 0 8px !important;
}
/* small thumbnail square on the left */
#justin_timeline_justin_form .custom-file .custom-file-label::before {
  content: "" !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: rgba(26, 26, 36, 0.06) !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}
/* the Browse chip on the right */
#justin_timeline_justin_form .custom-file .custom-file-label::after {
  content: "Browse" !important;
  position: static !important;
  margin-left: auto !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(26, 26, 36, 0.06) !important;
  color: #1a1a24 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 12px !important;
}

/* ---- Segmented radio cards (.news-item) & tabs (.grouptabselect) -------- */
#justin_timeline_justin_form .form-check.news-item { border-radius: 10px !important; }
#justin_timeline_justin_form .grouptabselect { border-radius: 10px !important; }

/* ==========================================================================
   SAFETY NET — never override the form's own show/hide logic. Elements the
   JS hides (Bootstrap .d-none or inline display:none) must stay hidden despite
   any styling above. High specificity + !important so this always wins.
   ========================================================================== */
#justin_timeline_justin_form .d-none.d-none,
#justin_timeline_justin_form [hidden] { display: none !important; }