/* Shared editorial palette for every Admin workspace page. */
#view-overview,
#view-institutes,
#view-forms,
#view-batches,
#view-super-import,
#view-manual,
#view-templates,
#view-library,
#view-issue,
#view-admins {
  --workspace-ink: #1d2423;
  --workspace-muted: #69716d;
  --workspace-coral: #e85d3f;
  --workspace-blue: #cfe5f4;
  --workspace-yellow: #f3df85;
  --workspace-pink: #efc8d7;
  --workspace-green: #e8eee7;
}
#view-super-import {
  --workspace-ink: #1d2423;
  --workspace-muted: #69716d;
  --workspace-coral: #e85d3f;
  --workspace-blue: #cfe5f4;
  --workspace-yellow: #f3df85;
  --workspace-pink: #efc8d7;
  --workspace-green: #e8eee7;
}

/* Shared action symbols use the workspace's dark-yellow accent. */
.view details > summary > b,
.view .suggested-flow button > i,
.view .button > span:last-child,
.view a > span:last-child { color:#8a6817; }
.view details > summary > b { font-weight:700; }

#view-institutes .type-entry-panel summary > b,
#view-institutes .button > span:last-child { color:#8a6817 !important; }

/* Every Admin page uses the same title rhythm as Overview. */
.view .page-heading {
  border-left-color: color-mix(in srgb, var(--view-accent) 42%, #fff);
  background: linear-gradient(100deg, var(--view-soft) 0%, color-mix(in srgb, var(--view-soft) 52%, #fff) 56%, rgba(255, 255, 255, 0) 100%);
}

.view .page-heading h3 {
  color: var(--workspace-ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -.09em;
}

.view .page-heading .muted {
  color: var(--workspace-muted);
}

.view .page-heading > .mono-label,
.view .page-heading > .count-pill {
  background: rgba(255, 255, 255, .68);
  color: var(--view-accent);
}

.view .page-heading + .surface,
.view .page-heading + .two-column > .surface,
.view .page-heading + .management-grid > .surface {
  border-top: 3px solid var(--view-accent);
}

#view-institutes { --view-accent: #5f8f70; --view-soft: #e8eee7; --view-number: #cfe5f4; }
#view-forms { --view-accent: #467b9d; --view-soft: #cfe5f4; --view-number: #b8d7eb; }
#view-batches { --view-accent: #9a7d21; --view-soft: #f3df85; --view-number: #ead16a; }
#view-manual { --view-accent: #a84f66; --view-soft: #efc8d7; --view-number: #e7b2c6; }
#view-templates { --view-accent: #8a6817; --view-soft: #f3df85; --view-number: #ead16a; }
#view-library { --view-accent: #467b9d; --view-soft: #cfe5f4; --view-number: #b8d7eb; }
#view-issue { --view-accent: #e85d3f; --view-soft: #f9e4dc; --view-number: #edc7ba; }
#view-admins { --view-accent: #8b4e61; --view-soft: #efc8d7; --view-number: #e5bdcb; }
#view-super-import { --view-accent: #e85d3f; --view-soft: #f9e4dc; --view-number: #edc7ba; }

#view-library,
#view-templates,
#view-manual {
  --workspace-blue: var(--blue);
  --workspace-yellow: var(--yellow);
  --workspace-pink: var(--pink);
  --workspace-green: #e8eee7;
  --workspace-green-deep: #5f8f70;
  --workspace-coral: var(--accent);
}

#view-library .template-library-toolbar,
#view-library .template-library-summary,
#view-library .quick-template-controls {
  border-color: color-mix(in srgb, var(--workspace-blue) 72%, #fff);
  background: color-mix(in srgb, var(--workspace-blue) 38%, #fff);
}

#view-library .quick-template-studio {
  border-left-color: var(--workspace-green-deep);
  box-shadow: 0 14px 34px rgba(49, 82, 62, .08);
}

#view-library .quick-template-preview-panel {
  background: color-mix(in srgb, var(--workspace-green) 72%, #fff);
}

/* Compact new-template launcher: controls stay together, preview stays useful. */
#view-library .quick-template-controls {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "intro" "primary" "filters" "error";
  align-items: start;
  gap: .45rem .7rem;
  padding: .5rem .62rem;
}

#view-library .quick-template-controls > div:first-child {
  grid-area: intro;
}

#view-library .quick-template-primary-row {
  display: grid;
  grid-area: primary;
  grid-template-columns: 112px minmax(190px, .9fr) minmax(190px, 1.4fr);
  align-items: end;
  gap: .38rem;
}

#view-library .quick-template-primary-row > label {
  min-width: 0;
  gap: .24rem;
  font-size: .55rem;
}

#view-library .quick-template-primary-row select,
#view-library .quick-template-primary-row input {
  min-height: 26px;
  padding: .28rem .36rem;
  font-size: .55rem;
}

#view-library .quick-template-primary-row .quick-template-actions {
  display: contents;
  margin: 0;
}

#view-library .quick-template-primary-row .quick-template-actions .button {
  width: 100%;
  min-height: 26px;
  padding: .28rem .22rem;
  font-size: .5rem;
}

#view-library .quick-template-controls > .template-library-toolbar {
  grid-area: filters;
  display: flex;
  align-items: end;
  flex-wrap: nowrap;
  width: 100%;
  margin: .05rem 0 0;
  gap: .35rem;
  border-top: 1px solid color-mix(in srgb, var(--workspace-blue) 55%, #fff);
}

#view-library .quick-template-controls > .template-library-toolbar label {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  white-space: nowrap;
}

#view-library .quick-template-controls > .template-library-toolbar label:first-child {
  flex: 1.6 1 0;
}

#view-library .quick-template-controls > .template-library-toolbar .template-library-summary {
  flex: 0 0 48px;
}

#view-library .quick-template-controls > .template-library-toolbar input,
#view-library .quick-template-controls > .template-library-toolbar select {
  min-width: 0;
  min-height: 24px;
  padding: .25rem .3rem;
  font-size: .5rem;
}

#view-library .quick-template-controls > .template-library-toolbar label {
  gap: .14rem;
  font-size: .46rem;
}

#view-library .quick-template-controls > .template-library-toolbar .template-library-summary {
  min-height: 24px;
  padding: .25rem .16rem;
}

#view-library .quick-template-controls > #starter-error {
  grid-area: error;
}

#view-library .quick-template-controls > div:first-child h4 {
  margin: .1rem 0 .08rem;
  font-size: .84rem;
}

#view-library .quick-template-controls > div:first-child .muted {
  max-width: none;
  overflow: hidden;
  font-size: .57rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-library .quick-template-basics {
  grid-area: setup;
  margin: 0;
}

#view-library .quick-template-basics label {
  width: auto;
  font-size: .55rem;
}

#view-library .quick-template-basics select {
  padding: .4rem .48rem;
  font-size: .61rem;
}

#view-library .quick-template-actions {
  grid-area: actions;
  margin: 0;
  gap: .3rem;
}

#view-library .quick-template-actions .button {
  min-height: 30px;
  padding: .34rem .28rem;
  font-size: .54rem;
}

#view-library .quick-template-preview-panel {
  min-height: 174px;
  padding: .38rem .5rem;
}

#view-library .quick-template-card {
  width: min(100%, 220px);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(41, 65, 50, .16);
}

#view-library .quick-template-card.is-portrait {
  width: min(100%, 112px);
}

#view-library .quick-template-preview-panel > p {
  margin: .35rem 0 0;
  font-size: .5rem;
}

/* Compact template search/filter card. */
#view-library .template-library-toolbar {
  grid-template-columns: minmax(210px, 1.7fr) repeat(3, minmax(118px, .7fr)) 76px;
  align-items: end;
  gap: .42rem;
  padding: .5rem .62rem;
}

#view-library .template-library-toolbar label {
  gap: .28rem;
  font-size: .56rem;
}

#view-library .template-library-toolbar input,
#view-library .template-library-toolbar select {
  min-height: 30px;
  padding: .4rem .48rem;
  font-size: .62rem;
}

#view-library .template-library-summary {
  min-height: 30px;
  gap: .2rem;
  padding: .4rem .35rem;
}

#view-library .template-library-summary strong {
  font-size: .86rem;
}

#view-library .template-library-summary span {
  font-size: .48rem;
}

@media (max-width: 900px) {
  #view-library .quick-template-controls {
    grid-template-columns: 1fr;
  }
  #view-library .quick-template-primary-row {
    grid-template-columns: 100px 1fr 1.3fr;
  }
  #view-library .template-library-toolbar {
    gap: .25rem;
    padding-left: .42rem;
    padding-right: .42rem;
  }
}

@media (max-width: 620px) {
  #view-library .quick-template-controls {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "primary" "filters" "error";
  }
  #view-library .quick-template-primary-row {
    grid-template-columns: 1fr 1fr;
  }
  #view-library .quick-template-primary-row .quick-template-find {
    grid-column: 1 / -1;
  }
  #view-library .quick-template-controls > div:first-child .muted {
    white-space: normal;
  }
  #view-library .quick-template-primary-row > label,
  #view-library .quick-template-primary-row .button {
    width: 100%;
  }
  #view-library .quick-template-preview-panel {
    min-height: 162px;
  }
  #view-library .template-library-toolbar {
    flex-wrap: wrap;
  }
  #view-library .quick-template-controls > .template-library-toolbar label {
    flex-basis: calc(50% - .2rem);
  }
  #view-library .quick-template-controls > .template-library-toolbar label:first-child {
    flex-basis: 100%;
  }
  #view-library .quick-template-controls > .template-library-toolbar .template-library-summary {
    flex: 1 1 calc(50% - .2rem);
  }
}

#view-library .template-library-summary {
  color: #355b72;
}

#view-library .template-gallery-card.is-workflow-selected {
  border-color: #6a9dbb;
  box-shadow: inset 0 0 0 2px #6a9dbb, 0 12px 30px rgba(70, 123, 157, .12);
}

#view-library .template-gallery-actions button.primary,
#view-templates .background-studio-actions .button-accent,
#view-manual .manual-save-bar .button-accent {
  background: var(--workspace-coral);
}

#view-templates .background-brief-panel {
  border-top: 3px solid color-mix(in srgb, var(--workspace-yellow) 78%, #b88b00);
  background: color-mix(in srgb, var(--workspace-yellow) 17%, #fff);
}

#view-templates .background-option-grid,
#view-templates .background-colour-row,
#view-templates .background-reference-status,
#view-templates .background-safety-note {
  border-color: color-mix(in srgb, var(--workspace-yellow) 58%, #d9ded4);
}

#view-templates .background-colour-row,
#view-templates .background-reference-status.is-active {
  background: color-mix(in srgb, var(--workspace-yellow) 30%, #fff);
}

#view-templates .background-comparison-grid .background-choice.is-selected {
  border-color: var(--workspace-coral);
  background: color-mix(in srgb, var(--workspace-yellow) 42%, #fff);
  box-shadow: inset 0 0 0 1px var(--workspace-coral);
}

#view-templates .background-preview-panel {
  border-top: 3px solid color-mix(in srgb, var(--workspace-pink) 78%, #a95270);
  background: color-mix(in srgb, var(--workspace-pink) 14%, #fff);
}

#view-templates .background-asset-card.is-style-reference {
  border-color: #d69bb1;
  background: color-mix(in srgb, var(--workspace-pink) 22%, #fff);
  box-shadow: inset 3px 0 0 #c97898;
}

/* AI studio actions: destructive, assistive, editing, generation, then commit. */
#view-templates #background-remove {
  border: 1px solid #e4b8ae;
  background: #fff3f0;
  color: #a84a3e;
}

#view-templates #background-remove:hover:not(:disabled) {
  background: #f7ddd8;
  border-color: #c8786b;
}

#view-templates #background-harmonize {
  border: 1px solid #e5ce82;
  background: color-mix(in srgb, var(--workspace-yellow) 38%, #fff);
  color: #80651f;
}

#view-templates #background-harmonize:hover:not(:disabled) {
  background: color-mix(in srgb, var(--workspace-yellow) 58%, #fff);
  border-color: #c7a846;
}

#view-templates #background-open-manual {
  border: 1px solid #a9cde2;
  background: color-mix(in srgb, var(--workspace-blue) 48%, #fff);
  color: #315f7c;
}

#view-templates #background-open-manual:hover:not(:disabled) {
  background: color-mix(in srgb, var(--workspace-blue) 68%, #fff);
  border-color: #6a9dbb;
}

#view-templates #background-generate-back {
  border: 1px solid #d69bb1;
  background: color-mix(in srgb, var(--workspace-pink) 48%, #fff);
  color: #87435b;
}

#view-templates #background-generate-back:hover:not(:disabled) {
  background: color-mix(in srgb, var(--workspace-pink) 68%, #fff);
  border-color: #bd708e;
}

#view-templates #background-apply {
  background: var(--workspace-coral);
  color: #fff;
  box-shadow: 0 5px 12px rgba(232, 93, 63, .16);
}

#view-templates #background-apply:hover:not(:disabled) {
  background: #d94e32;
}

#view-templates .background-studio-actions .button:disabled {
  filter: saturate(.35);
  opacity: .48;
}

#view-manual .manual-tool-panel {
  border-top: 3px solid color-mix(in srgb, var(--workspace-blue) 80%, #477897);
  background: color-mix(in srgb, var(--workspace-blue) 16%, #fff);
}

#view-manual .manual-canvas-panel {
  border-top: 3px solid color-mix(in srgb, var(--workspace-pink) 72%, #a95270);
  background: color-mix(in srgb, var(--workspace-pink) 11%, #fff);
}

#view-manual .manual-layer-panel {
  border-top: 3px solid color-mix(in srgb, var(--workspace-yellow) 78%, #b88b00);
  background: color-mix(in srgb, var(--workspace-yellow) 13%, #fff);
}

#view-library .template-workflow-context,
#view-templates .template-workflow-context,
#view-manual .template-workflow-context {
  border-left-color: var(--workspace-green-deep);
  background: color-mix(in srgb, var(--workspace-green) 78%, #fff);
}

#view-library .template-workflow-context button:hover,
#view-templates .template-workflow-context button:hover,
#view-manual .template-workflow-context button:hover {
  border-color: var(--workspace-green-deep);
  background: #fff;
  color: #315d43;
}

@media (max-width: 760px) {
  #view-library .template-library-toolbar,
  #view-templates .background-brief-panel,
  #view-manual .manual-tool-panel,
  #view-manual .manual-canvas-panel,
  #view-manual .manual-layer-panel {
    border-top-width: 2px;
  }
}

/* Design Library browser: one compact filter strip with a restrained preview. */
#view-library .quick-template-studio {
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, .45fr);
  min-height: 0;
  border-left: 0;
  border-top: 3px solid var(--workspace-green-deep);
}

#view-library .quick-template-controls {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .42rem;
  padding: .62rem .72rem;
}

#view-library .library-browser-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "eyebrow heading" "copy copy";
  align-items: baseline;
  gap: .12rem .6rem;
}

#view-library .library-browser-heading .eyebrow {
  grid-area: eyebrow;
  margin: 0;
}

#view-library .library-browser-heading h4 {
  grid-area: heading;
  margin: 0;
  font-size: .84rem;
}

#view-library .library-browser-heading .muted {
  grid-area: copy;
  margin: 0;
  font-size: .58rem;
  line-height: 1.35;
}

#view-library .quick-template-controls > .library-browser-toolbar {
  display: grid;
  grid-template-columns: 104px minmax(220px, 1fr) 100px 112px 112px 52px;
  align-items: end;
  gap: .34rem;
  width: 100%;
  margin: 0;
  padding: .44rem;
  border: 1px solid color-mix(in srgb, var(--workspace-blue) 58%, #fff);
  background: rgba(255, 255, 255, .52);
}

#view-library .quick-template-controls > .library-browser-toolbar label {
  display: grid;
  min-width: 0;
  gap: .18rem;
  overflow: visible;
  color: #52675a;
  font-size: .49rem;
  white-space: nowrap;
}

#view-library .quick-template-controls > .library-browser-toolbar input,
#view-library .quick-template-controls > .library-browser-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: .34rem .4rem;
  border-color: #c4d4c7;
  background: #fff;
  font-size: .58rem;
}

#view-library .quick-template-controls > .library-browser-toolbar .template-library-summary {
  display: grid;
  min-height: 28px;
  place-content: center;
  gap: 0;
  padding: .2rem;
  background: #dfece3;
  text-align: center;
}

#view-library .quick-template-controls > .library-browser-toolbar .template-library-summary strong {
  font-size: .78rem;
  line-height: 1;
}

#view-library .quick-template-controls > .library-browser-toolbar .template-library-summary span {
  margin-top: .08rem;
  font-size: .4rem;
}

#view-library .quick-template-preview-panel {
  min-height: 142px;
  padding: .45rem .55rem;
  border-left: 1px solid #d8e3da;
}

#view-library .quick-template-preview-panel > div:first-child {
  margin-bottom: .25rem;
}

#view-library .quick-template-card {
  width: min(100%, 180px);
}

#view-library .quick-template-card.is-portrait {
  width: min(100%, 88px);
}

#view-library #library-save-background {
  align-self: end;
  min-width: 0;
  width: auto;
  padding: .34rem .5rem;
  white-space: nowrap;
  font-size: .5rem;
  line-height: 1;
}

#view-library #library-save-background:disabled {
  border-color: #cfded2;
  background: #e7eee8;
  color: #829187;
  opacity: 1;
  cursor: not-allowed;
}

#view-library .quick-template-preview-panel > p {
  margin-top: .24rem;
  font-size: .45rem;
}

#view-library .quick-template-action-note {
  color: var(--workspace-coral);
  font-weight: 700;
  letter-spacing: .02em;
}

#view-library .quick-preview-side-switch {
  padding: 0;
  border: 0;
  background: transparent;
  color: #42604d;
  font: 600 .5rem "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

#view-library .quick-preview-side-switch:hover,
#view-library .quick-preview-side-switch:focus-visible {
  color: var(--workspace-coral);
  text-decoration: underline;
}


#view-library #starter-error:empty {
  display: none;
}

#view-library #starter-card-preview {
  cursor: pointer;
  outline: 0;
}

#view-library #starter-card-preview:hover,
#view-library #starter-card-preview:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-green-deep) 42%, #fff), 0 12px 26px rgba(41, 65, 50, .16);
}

@media (max-width: 980px) {
  #view-library .quick-template-studio {
    grid-template-columns: 1fr;
  }
  #view-library .quick-template-preview-panel {
    min-height: 150px;
    border-top: 1px solid #d8e3da;
    border-left: 0;
  }
}

@media (max-width: 720px) {
  #view-library .quick-template-controls > .library-browser-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  #view-library .quick-template-controls > .library-browser-toolbar .quick-template-find {
    grid-column: 1 / -1;
  }
  #view-library .quick-template-controls > .library-browser-toolbar .template-library-summary {
    min-height: 28px;
  }
}