/* ==========
   TIL Core CSS
   - Mobile-first single column; 2 columns ≥768px
   - Select2 dark & light variants (auto by system or force via body class)
   ========== */

/* Layout */
.til-form .acf-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:16px 20px;
}
.til-form .acf-field{ margin:0; }
.til-form .acf-field[data-name="post_title"],
.til-form .til-span-2{ grid-column:1/-1; }

@media (min-width:768px){
  .til-form .acf-fields{ grid-template-columns:1fr 1fr; }
  .til-form .til-parent-col{ grid-column:2; } /* parent dropdown to the right */
}

/* Make Select2 fill width */
.til-form .select2-container{ width:100% !important; }

/* ===== Select2 — Dark theme (default for your current theme) ===== */
.til-form .select2-container--default .select2-selection--single{
  background:#2b2b2b; border-color:#444; min-height:40px;
}
.til-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff; line-height:40px;
}
.til-form .select2-container--default .select2-selection--single .select2-selection__arrow{ height:40px; }
.til-form .select2-selection__placeholder{ color:#ddd; opacity:1; }

/* Open dropdown panel (Select2 renders in body; we style globally) */
.select2-container--open .select2-dropdown,
.select2-container--open .select2-search--dropdown,
.select2-container--open .select2-search--dropdown .select2-search__field{
  background:#2b2b2b; border-color:#444; color:#fff;
}
.select2-container--open .select2-results,
.select2-container--open .select2-results > .select2-results__options{
  background:#2b2b2b;
}
.select2-container--open .select2-results__option{
  background:#2b2b2b; color:#fff;
}
.select2-container--open .select2-results__option[aria-selected="true"]{
  background:#3a3a3a; color:#fff;
}
.select2-container--open .select2-results__option--highlighted[aria-selected]{
  background:#475cff; color:#fff;
}

/* Fallback for any native <select> in ACF */
.til-form .acf-input select,
.til-form .acf-input option{
  background:#2b2b2b; color:#fff; border-color:#444;
}

/* ===== Optional: Light theme variant (auto if user prefers light) ===== */
@media (prefers-color-scheme: light){
  .til-form .select2-container--default .select2-selection--single{
    background:#fff; border-color:#ccc;
  }
  .til-form .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:#111;
  }
  .select2-container--open .select2-dropdown,
  .select2-container--open .select2-search--dropdown,
  .select2-container--open .select2-search--dropdown .select2-search__field{
    background:#fff; border-color:#ccc; color:#111;
  }
  .select2-container--open .select2-results,
  .select2-container--open .select2-results > .select2-results__options{
    background:#fff;
  }
  .select2-container--open .select2-results__option{
    background:#fff; color:#111;
  }
  .select2-container--open .select2-results__option[aria-selected="true"]{
    background:#f3f3f3; color:#111;
  }
  .select2-container--open .select2-results__option--highlighted[aria-selected]{
    background:#f2f6ff; color:#111;
  }
  .til-form .acf-input select,
  .til-form .acf-input option{
    background:#fff; color:#111; border-color:#ccc;
  }
}

/* ===== (Optional) Force light or dark via body class ===== */
/* Add body.light-til or body.dark-til to override prefers-color-scheme */
body.light-til .til-form .select2-container--default .select2-selection--single{
  background:#fff; border-color:#ccc;
}
body.light-til .til-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#111;
}
body.light-til .select2-container--open .select2-dropdown,
body.light-til .select2-container--open .select2-search--dropdown,
body.light-til .select2-container--open .select2-search--dropdown .select2-search__field{
  background:#fff; border-color:#ccc; color:#111;
}
body.dark-til .til-form .select2-container--default .select2-selection--single{
  background:#2b2b2b; border-color:#444;
}
body.dark-til .til-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff;
}
body.dark-til .select2-container--open .select2-dropdown,
body.dark-til .select2-container--open .select2-search--dropdown,
body.dark-til .select2-container--open .select2-search--dropdown .select2-search__field{
  background:#2b2b2b; border-color:#444; color:#fff;
}
/* ---- TIL: force dark Select2 dropdown anywhere (global fallback) ---- */
.select2-container--open .select2-dropdown,
.select2-container--open .select2-search--dropdown,
.select2-container--open .select2-search--dropdown .select2-search__field{
  background:#2b2b2b !important;
  border-color:#444 !important;
  color:#fff !important;
}
.select2-container--open .select2-results,
.select2-container--open .select2-results > .select2-results__options{
  background:#2b2b2b !important;
}
.select2-container--open .select2-results__option{
  background:#2b2b2b !important;
  color:#fff !important;
}
.select2-container--open .select2-results__option[aria-selected="true"]{
  background:#3a3a3a !important;
  color:#fff !important;
}
.select2-container--open .select2-results__option--highlighted[aria-selected]{
  background:#475cff !important;
  color:#fff !important;
}

/* Closed state inside our forms */
.til-form .select2-container--default .select2-selection--single{
  background:#2b2b2b !important;
  border-color:#444 !important;
  min-height:40px;
}
.til-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff !important;
  line-height:40px;
}
.til-form .select2-container{ width:100% !important; }

/* Fallback if any native <select> appears */
.til-form .acf-input select, .til-form .acf-input option{
  background:#2b2b2b !important;
  color:#fff !important;
  border-color:#444 !important;
}

/* Goal tree spacing */
.til-tree ul { margin: .3rem 0 .3rem 1rem; }
.til-tree a { text-decoration: none; }
.til-tree h3 { margin: .5rem 0; }

/* Collapsible tree look */
.til-toolbar { display:flex; gap:8px; margin:0 0 12px 0; flex-wrap:wrap; }
.til-tree-title { margin:.5rem 0 1rem; }

.til-tree-collapsible { display:block; }
.til-tree-collapsible .til-node { margin:8px 0; border:1px solid #444; border-radius:8px; background:#1f1f1f; }
.til-tree-collapsible .til-node > summary {
  list-style:none; cursor:pointer; padding:10px 12px; user-select:none;
  display:flex; align-items:center; gap:8px; font-weight:600;
}
.til-tree-collapsible .til-node > summary::-webkit-details-marker { display:none; }
.til-tree-collapsible .til-node > summary::before {
  content:'+'; width:1.2em; text-align:center; font-weight:700; color:#fff;
}
.til-tree-collapsible .til-node[open] > summary::before { content:'–'; }

.til-tree-collapsible .til-children { padding:8px 12px 12px 12px; border-top:1px solid #444; }
.til-tree-collapsible .til-steps { margin:6px 0 0 1.1rem; }
.til-tree-collapsible .til-empty { opacity:.75; margin:6px 0 0 0; }

/* Checklist layout */
.til-checklist-wrap .til-checklist-action { border:1px solid #444; border-radius:10px; margin:12px 0; background:#1f1f1f; }
.til-checklist-wrap h4 { margin:0; padding:10px 12px; border-bottom:1px solid #444; }
.til-checklist-wrap h5 { margin:.6rem 0 .4rem; padding:0 12px; opacity:.9; }
.til-checklist-wrap .til-checklist-steps { padding:0 12px 12px; margin:0; list-style:none; }
.til-checklist-wrap .til-checklist-steps li { margin:.35rem 0; }
.til-checklist-wrap label { display:flex; gap:.5rem; align-items:center; }

/* Print-friendly (both views) */
@media print {
  .til-toolbar, .site-header, .site-footer, .wp-block { display:none !important; }
  .til-tree-title { margin:0 0 .5rem 0; }
  /* Expand all details when printing */
  details { open: open; }
  /* Ensure dark borders print readably (browsers may invert) */
  .til-node, .til-checklist-action { border-color:#000; }
}
/* New Code added for tree - Collapsible tree UI */
.til-toolbar { display:flex; gap:8px; margin:0 0 12px 0; flex-wrap:wrap; }
.til-tree-title { margin:.5rem 0 1rem; }

.til-tree-collapsible .til-node { margin:8px 0; border:1px solid #444; border-radius:8px; background:#1f1f1f; }
.til-tree-collapsible .til-node > summary {
  list-style:none; cursor:pointer; padding:10px 12px; user-select:none;
  display:flex; align-items:center; gap:8px; font-weight:600;
}
.til-tree-collapsible .til-node > summary::-webkit-details-marker { display:none; }
.til-tree-collapsible .til-node > summary::before {
  content:'+'; width:1.2em; text-align:center; font-weight:700; color:#fff;
}
.til-tree-collapsible .til-node[open] > summary::before { content:'–'; }

.til-tree-collapsible .til-children { padding:8px 12px 12px; border-top:1px solid #444; }
.til-tree-collapsible .til-steps { margin:6px 0 0 1.1rem; }
.til-tree-collapsible .til-empty { opacity:.75; margin:6px 0 0 0; }

/* Done checkbox UI */
.til-done { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-weight:400; opacity:.9; }
.til-done input[type="checkbox"] { transform: translateY(1px); }

/* Strike-through done steps, dim done nodes */
.til-step.is-done > label > span { text-decoration: line-through; opacity:.7; }
.til-node.is-done > summary > span { text-decoration: line-through; opacity:.8; }

/* Hide-done mode (toolbar toggle adds .til-hide-done on wrapper) */
.til-collapsible-wrap.til-hide-done .is-done,
.til-checklist-wrap.til-hide-done .is-done { display:none !important; }
/* Calendar sizing */
#til-calendar { min-height: 720px; background:#1f1f1f; border:1px solid #444; border-radius:10px; padding:6px; }

/* Make FullCalendar look okay on dark theme */
.fc .fc-toolbar-title { color:#fff; }
.fc .fc-button { background:#2b2b2b; border-color:#444; color:#fff; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background:#475cff; border-color:#475cff; }
.fc-theme-standard .fc-scrollgrid { border-color:#333; }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number { color:#fff; }
.fc .fc-event { background:#475cff; border-color:#475cff; }