/*
 * NineBrief shared document editor controls
 *
 * Reusable low-level editor primitives shared by document generators.
 * Consumers tune appearance through --nb-doc-* variables instead of
 * copying component implementations.
 */


:where(.editor-card,details.card){
  margin:var(--nb-doc-card-margin,0 0 12px);
  overflow:hidden;
  border:var(--nb-doc-card-border,1px solid var(--nb-border));
  border-radius:var(--nb-doc-card-radius,16px);
  background:var(--nb-doc-card-bg,var(--nb-white));
  box-shadow:var(--nb-doc-card-shadow,none);
}

:where(.editor-card-body,details.card>.card-body){
  padding:var(--nb-doc-card-body-padding,14px);
  border-top:var(--nb-doc-card-body-border,1px solid #efefef);
}

.field input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select,
.field textarea{
  width:100%;
  min-width:var(--nb-doc-control-min-width,auto);
  min-height:var(--nb-doc-control-min-height,44px);
  border:var(--nb-doc-control-border,1px solid #d4d4d4);
  border-radius:var(--nb-doc-control-radius,10px);
  background:var(--nb-doc-control-bg,var(--nb-white));
  color:var(--nb-doc-control-color,var(--nb-ink));
  padding:var(--nb-doc-control-padding,9px 11px);
  outline:none;
  box-shadow:var(--nb-doc-control-shadow,none);
  font-size:var(--nb-doc-control-size,inherit);
  line-height:var(--nb-doc-control-line-height,normal);
  font-weight:var(--nb-doc-control-weight,400);
  transition:var(--nb-doc-control-transition,border-color 150ms ease,box-shadow 150ms ease,background 150ms ease);
}

.field input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--nb-doc-control-focus-border,var(--nb-green));
  box-shadow:var(--nb-doc-control-focus-shadow,0 0 0 3px var(--nb-green-focus));
}

:where(.document-mode-switch,.segment-control){
  display:var(--nb-doc-segment-display,grid);
  grid-template-columns:var(--nb-doc-segment-columns,1fr 1fr);
  gap:var(--nb-doc-segment-gap,4px);
  margin-top:var(--nb-doc-segment-margin-top,14px);
  padding:var(--nb-doc-segment-padding,4px);
  border:var(--nb-doc-segment-border,1px solid var(--nb-border));
  border-radius:var(--nb-doc-segment-radius,12px);
  background:var(--nb-doc-segment-bg,var(--nb-surface));
}

:where(.document-mode-switch,.segment-control) button{
  min-height:var(--nb-doc-segment-button-height,42px);
  flex:var(--nb-doc-segment-button-flex,initial);
  border:0;
  border-radius:var(--nb-doc-segment-button-radius,9px);
  background:transparent;
  color:var(--nb-doc-segment-button-color,var(--nb-muted));
  font:inherit;
  font-size:var(--nb-doc-segment-button-size,inherit);
  font-weight:var(--nb-doc-segment-button-weight,600);
  cursor:pointer;
  transition:var(--nb-doc-segment-transition,background 120ms ease,color 120ms ease,box-shadow 120ms ease,transform 90ms ease);
}

:where(.document-mode-switch,.segment-control) button:is(.is-active,.active){
  background:var(--nb-doc-segment-active-bg,var(--nb-white));
  color:var(--nb-doc-segment-active-color,var(--nb-ink));
  box-shadow:var(--nb-doc-segment-active-shadow,0 3px 10px rgba(18,18,18,.07));
}

:where(.preview-toolbar,.toolbar){
  position:sticky;
  top:var(--nb-doc-toolbar-top,0);
  z-index:var(--nb-doc-toolbar-z,12);
  min-height:var(--nb-doc-toolbar-min-height,58px);
  display:flex;
  align-items:var(--nb-doc-toolbar-align,center);
  gap:var(--nb-doc-toolbar-gap,8px);
  flex-wrap:var(--nb-doc-toolbar-wrap,wrap);
  padding:var(--nb-doc-toolbar-padding,9px 12px);
  border-bottom:var(--nb-doc-toolbar-border-bottom,1px solid #d8d8d8);
  background:var(--nb-doc-toolbar-bg,rgba(255,255,255,.96));
  color:var(--nb-doc-toolbar-color,inherit);
  box-shadow:var(--nb-doc-toolbar-shadow,none);
  backdrop-filter:var(--nb-doc-toolbar-backdrop,blur(10px));
  -webkit-backdrop-filter:var(--nb-doc-toolbar-backdrop,blur(10px));
}

:where(.preview-toolbar,.toolbar) .spacer{
  flex:1;
}

.toolbar-button,
.toolbar .btn:not(.preview-edit-toggle){
  flex-shrink:0;
  min-height:var(--nb-doc-toolbar-button-height,40px);
  padding:var(--nb-doc-toolbar-button-padding,0 11px);
  border:var(--nb-doc-toolbar-button-border,1px solid #d8d8d8);
  border-radius:var(--nb-doc-toolbar-button-radius,9px);
  background:var(--nb-doc-toolbar-button-bg,var(--nb-white));
  color:var(--nb-doc-toolbar-button-color,#3f3f3f);
  box-shadow:var(--nb-doc-toolbar-button-shadow,none);
  font-size:var(--nb-doc-toolbar-button-size,11px);
  font-weight:var(--nb-doc-toolbar-button-weight,600);
  transform:none;
}

.toolbar-button:hover,
.toolbar .btn:not(.preview-edit-toggle):hover{
  border-color:var(--nb-doc-toolbar-button-hover-border,#bdbdbd);
  background:var(--nb-doc-toolbar-button-hover-bg,var(--nb-doc-toolbar-button-bg,var(--nb-white)));
  color:var(--nb-doc-toolbar-button-hover-color,var(--nb-ink));
  box-shadow:var(--nb-doc-toolbar-button-hover-shadow,var(--nb-doc-toolbar-button-shadow,none));
  transform:none;
}

:where(.preview-toolbar,.toolbar) .zoom-label{
  min-width:var(--nb-doc-zoom-label-width,38px);
  color:var(--nb-doc-zoom-label-color,var(--nb-muted));
  font-size:var(--nb-doc-zoom-label-size,10px);
  font-weight:var(--nb-doc-zoom-label-weight,400);
  text-align:center;
}

.field{
  display:flex;
  flex-direction:column;
  gap:var(--nb-doc-field-gap,6px);
  min-width:0;
}

.field>small{
  margin-top:var(--nb-doc-field-help-margin-top,-2px);
  color:var(--nb-doc-field-help-color,var(--nb-muted));
  font-size:var(--nb-doc-field-help-size,10px);
  font-weight:var(--nb-doc-field-help-weight,400);
}

.logo-uploader{
  display:grid;
  grid-template-columns:var(--nb-doc-logo-columns,1fr auto);
  gap:var(--nb-doc-logo-gap,10px);
  align-items:var(--nb-doc-logo-align,stretch);
  margin-bottom:var(--nb-doc-logo-margin-bottom,14px);
}

.logo-upload-target{
  min-height:var(--nb-doc-logo-target-height,58px);
  display:flex;
  align-items:center;
  gap:var(--nb-doc-logo-target-gap,10px);
  padding:var(--nb-doc-logo-target-padding,10px 12px);
  border:var(--nb-doc-logo-target-border,1px dashed #c9c9c9);
  border-radius:var(--nb-doc-logo-target-radius,12px);
  background:var(--nb-doc-logo-target-bg,#fafafa);
  cursor:pointer;
}

.logo-upload-target strong{
  display:block;
  color:var(--nb-doc-logo-title-color,inherit);
  font-size:var(--nb-doc-logo-title-size,12px);
}

.logo-upload-target small{
  display:block;
  margin-top:2px;
  color:var(--nb-doc-logo-help-color,var(--nb-muted));
  font-size:var(--nb-doc-logo-help-size,10px);
  font-weight:400;
}

.logo-upload-icon{
  width:var(--nb-doc-logo-icon-size,30px);
  height:var(--nb-doc-logo-icon-size,30px);
  display:grid;
  place-items:center;
  border:var(--nb-doc-logo-icon-border,0);
  border-radius:var(--nb-doc-logo-icon-radius,9px);
  background:var(--nb-doc-logo-icon-bg,var(--nb-green-soft));
  color:var(--nb-doc-logo-icon-color,inherit);
  font-size:var(--nb-doc-logo-icon-font-size,18px);
}

.privacy-note{
  margin:var(--nb-doc-privacy-margin,16px 2px 0);
  padding:var(--nb-doc-privacy-padding,0);
  border:var(--nb-doc-privacy-border,0);
  border-radius:var(--nb-doc-privacy-radius,0);
  background:var(--nb-doc-privacy-bg,transparent);
  color:var(--nb-doc-privacy-color,var(--nb-muted));
  font-size:var(--nb-doc-privacy-size,11px);
  line-height:var(--nb-doc-privacy-line-height,1.5);
  text-align:var(--nb-doc-privacy-align,left);
}

.toast{
  position:fixed;
  left:50%;
  bottom:var(--nb-doc-toast-bottom,24px);
  z-index:var(--nb-doc-toast-z,80);
  transform:translate(-50%,var(--nb-doc-toast-offset,14px));
  max-width:var(--nb-doc-toast-max-width,none);
  padding:var(--nb-doc-toast-padding,10px 14px);
  border-radius:var(--nb-doc-toast-radius,10px);
  background:var(--nb-doc-toast-bg,var(--nb-dark));
  color:var(--nb-doc-toast-color,var(--nb-white));
  box-shadow:var(--nb-doc-toast-shadow,none);
  font-size:var(--nb-doc-toast-size,12px);
  font-weight:var(--nb-doc-toast-weight,600);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--nb-doc-toast-duration,160ms) ease,transform var(--nb-doc-toast-duration,160ms) ease;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}