/* Tool studio redesign — rolled out to every tool's studio (the interactive
   editor shown after files are uploaded). Originally designed and verified
   on Bates Numbering, then generalized here.

   Every rule is scoped under .global-editor — the shared studio root class
   present on every single tool's editor container (e.g. <div class="global-editor
   bates-editor">, <div class="global-editor exhibit-editor">, plain <div
   class="global-editor"> on Merge PDF, etc.). Scoping under .global-editor makes
   these rules apply uniformly across every tool without per-tool duplication;
   selectors that target elements only some tools have (accordion, position
   picker, context menu, CTA subtext) simply no-op harmlessly on tools that
   don't render them.

   Flat, solid-border, no-gradient visual language — no edits to the shared
   merge-tool.css/bates-tool.css files themselves, so nothing here can ever
   conflict with their base rules; this file only adds/overrides on top. */

/* ============ Toolbar ============ */
/* Button design/sizing overrides were reverted per user feedback — the
   redesigned buttons didn't read well. Toolbar buttons are back to their
   original app.css/merge-tool.css appearance and size. Only two things are
   kept: the taller 55px row (a separate, explicitly requested change) and
   the divider dark-mode fix (app.css hardcodes a light-only divider color
   with no dark-mode variant, which would render near-invisible in dark
   mode — keeping this is what "keep dark mode intact" requires). */

.global-editor .global-canvas-toolbar-row {
    min-height: 55px !important;
}

.global-editor .toolbar-divider {
    background-color: var(--color-border-strong, #cbd5e1) !important;
}

/* ============ Settings sidebar accordion (where present) ============ */

.global-editor .bates-accordion-item {
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    transition: border-color .15s ease, background-color .15s ease;
}

.global-editor .bates-accordion-header {
    padding-left: 0.75rem;
}

.global-editor .bates-accordion-header.active {
    border-color: var(--color-primary);
}


/* Icon chip — small colored badge in front of each section label, cycling
   through the same accent palette used by the tool-cards-grid component
   elsewhere on the site, for a consistent visual language. */
.global-editor .bn-acc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    margin-right: 0.6rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.global-editor .bates-accordion-header .bn-acc-icon i.bi {
    margin-right: 0;
    color: inherit;
}

.global-editor .bates-accordion-item:nth-of-type(6n+1) .bn-acc-icon { background: #f9731622; color: #f97316; }
.global-editor .bates-accordion-item:nth-of-type(6n+2) .bn-acc-icon { background: #22c55e22; color: #22c55e; }
.global-editor .bates-accordion-item:nth-of-type(6n+3) .bn-acc-icon { background: #3b82f622; color: #3b82f6; }
.global-editor .bates-accordion-item:nth-of-type(6n+4) .bn-acc-icon { background: #a855f722; color: #a855f7; }
.global-editor .bates-accordion-item:nth-of-type(6n+5) .bn-acc-icon { background: #14b8a622; color: #14b8a6; }
.global-editor .bates-accordion-item:nth-of-type(6n+6) .bn-acc-icon { background: #ef444422; color: #ef4444; }

.global-editor .global-setting-label {
    display: block;
    margin-bottom: 0.3rem;
}

.global-editor .bates-accordion-body.global-settings-group > *:not(:last-child) {
    margin-bottom: 0.1rem;
}

/* ============ Position picker (where present) ============ */

.global-editor .bates-position-grid {
    max-width: 210px;
    gap: 0.5rem;
}

.global-editor .bates-pos-btn {
    border-width: 1.5px;
}

.global-editor .bates-pos-btn.active {
    box-shadow: inset 0 0 0 2px var(--color-surface);
}

.global-editor .bates-pos-btn.is-center {
    border-style: dashed;
}

/* ============ File / page card grid ============ */

.global-editor .global-file-card {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.global-editor .global-file-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .25);
}

.global-editor .file-reorder-handle {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs, .375rem);
    background: var(--color-surface);
    opacity: .55;
    transition: opacity .15s ease, border-color .15s ease;
}

.global-editor .global-file-card:hover .file-reorder-handle {
    opacity: 1;
    border-color: var(--color-primary);
}

/* ============ Context menu / per-file modal (where present) ============ */

#pageContextMenu {
    border-width: 1.5px;
}

#fileSettingsModal .bates-file-modal-card {
    border-width: 1.5px;
}

/* ============ CTA subtext / submit footer (where present) ============ */

.global-editor .bates-cta-subtext {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    font-weight: 600;
}

/* ============ Studio empty-state dropzone (unified size) ============ */
/* Two competing implementations existed: the generic JS-created
   .editor-empty-state (Merge/Split/Compress/Bates Numbering/Exhibit/Bates
   Range Splitter — bigger, ~600px/300px+) and a hand-authored bespoke one
   per tool with its own class name (Redactor/Sanitizer/PII Scanner/Hidden
   Content Finder/Privilege Log/Metadata Remover — smaller, 520px/240px).
   Force both to the exact same size/shape. Redline Compare is deliberately
   excluded — its studio empty state is a genuine dual side-by-side dropzone
   (Original + Revised document), not a single upload box, so forcing it to
   this shape would misrepresent that UI rather than unify it. */
.editor-empty-state,
.redactor-empty-dropzone,
.sanitizer-empty-dropzone,
.pii-empty-dropzone,
.hidden-empty-dropzone,
.privlog-empty-dropzone,
.meta-empty-dropzone {
    min-height: 240px !important;
    height: auto !important;
    max-width: 520px !important;
    width: 100% !important;
    /* .editor-empty-state sits as a direct flex child of .global-editor-canvas
       with no centering wrapper of its own — margin:auto on all sides is the
       standard flexbox trick to center a flex item on both axes at once,
       regardless of the container's flex-direction. Previously this was
       "2rem auto" (horizontal-only centering + a small fixed top gap), which
       left the box stuck near the top of the canvas with dead space below. */
    margin: auto !important;
    padding: 2rem 1.25rem !important;
    border: 2px dashed var(--color-border-strong, var(--color-border)) !important;
    border-radius: 16px !important;
    background: var(--color-surface) !important;
}