/* Placeholder style */
div.grc-docs input::placeholder,
div.grc-edit-wrap input::placeholder {
  color: #999 !important;
  font-style: italic;
}

/* Wrapper backgrounds */
div.grc-add-wrap,
div.grc-edit-wrap {
  background: #eee;
}

/* Form element sizing */
div.grc-add-wrap input,
div.grc-add-wrap select,
div.grc-edit-wrap input,
div.grc-edit-wrap select {
  height: 2em;
}

/* Button + paragraph spacing */
div.grc-docs button { padding: 3px; }
div.grc-docs p { margin-bottom: 5px; }

/* Slide/fade panels */
.grc-slide {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease;
}
.grc-slide.open {
  max-height: 500px;
  opacity: 1;
}
.grc-slide > * { margin-top: .5em; }

/* Lists */
.grc-doc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.grc-doc-list > li { padding: 6px 0; }

/* Categories */
.grc-category { margin-top: 14px; }
.grc-category h4 {
  margin: 10px 0 6px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

/* Minor UI */
.grc-edit-link { opacity: .8; }
.grc-aud { margin-left: 4px; }

/* Spruce up the list of documents */
div.grc-docs div.grc-category h4 {
  font-size: 1.25em;
  line-height: 1.2;
  font-weight: 400;
  font-style: italic;
  border-bottom: unset;
}
div.grc-docs div.grc-category ul.grc-doc-list {
  padding-left: 40px;
  font-size: 1em;
  list-style: circle;
}
div.grc-docs div.grc-category ul.grc-doc-list li { padding: 0; }

/* Global edit toggle */
.grc-global-edit { margin: 6px 0 10px; }

/* Manager UI visibility (controlled by .grc-edit-mode on the root) */
.grc-manage-ui { display: none; }                         /* hidden by default */
.grc-docs.grc-edit-mode .grc-manage-ui { display: block; }/* shown when editing */

/* Keep edit panels hidden unless opened, even in edit mode */
.grc-edit-wrap { display: none; }
.grc-docs.grc-edit-mode .grc-edit-wrap { display: block; } /* still collapsed until .open */

/* Hide all manager-only UI unless Edit mode is ON */
.grc-docs:not(.grc-edit-mode) .grc-manage-only {
  display: none !important;
}

/* Also keep inline edit panels hidden when not in edit mode */
.grc-docs:not(.grc-edit-mode) .grc-edit-wrap {
  display: none !important;
}

.grc-docs:not(.grc-edit-mode) .grc-manage-only {
  display: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .grc-slide { transition: none; }
}

/* 1) Default: only hide when explicitly flagged */
.grc-manage-only.is-hidden,
.grc-manage-ui.is-hidden {
  display: none !important;
}

/* 2) When edit mode is ON, show manager UI (except the inline panels) */
.grc-docs.grc-edit-mode .grc-manage-only.open,
.grc-docs.grc-edit-mode .grc-manage-ui.open {
  display: inline !important;   /* or inline-block if you prefer */
}

/* 3) Inline edit panels: collapsed by default, expand when .open */
.grc-edit-wrap {
  display: none !important;     /* keep out of layout until opened */
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}

/* When opened, they become visible and take space */
.grc-edit-wrap.open {
  display: block !important;
  max-height: 1000px;           /* large enough for contents */
}

/* for document pdf icon */
.grc-filetype-pdf {
  color: #d9534f;          /* red PDF icon */
  font-size: 16px;
  vertical-align: text-bottom;
  margin-left: 6px;
  white-space: nowrap;
}

/* =========================================================
   Document list in multi column view
========================================================= */

.grc-doc-list.multiColumn:not(.noMulti) {
  display: block;             /* make sure not flex/grid */
 column-width: 15em;    /* try to keep each column ~15em wide */
  column-gap: 1.5rem;
  column-rule: none;          /* no vertical divider */
  list-style-position: inside;
  max-width: 100%;            /* so it expands with the container */
}

.grc-doc-list.multiColumn:not(.noMulti) li{
  break-inside: avoid-column;  /* keep each li whole */
  -webkit-column-break-inside: avoid; /* Safari/old Chrome */
  margin-bottom: .4em;
}