/* ============ dialogs.css — Font, Paragraph, Find/Replace, etc. ============ */

/* Font dialog */
#dlgFont .font-main{display:flex;gap:14px}
#dlgFont .font-left{flex:1;min-width:280px}
#dlgFont .font-right{flex:0 0 260px}
.font-preview-box{height:112px}
#fontPreviewText{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.font-effects{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
#fontColorSwatch{width:20px;height:14px;border:1px solid #999;border-radius:2px;display:inline-block;vertical-align:middle;background:#000}

/* underline style select */
#underlineStyleSelect{width:100%;height:auto}
#underlineStyleSelect option{padding:3px 6px}

/* Find & Replace dialog */
#dlgFindReplace .fr-tabs{display:flex;gap:2px;border-bottom:1px solid #d5d5d5;margin-bottom:14px}
#dlgFindReplace .fr-tab{padding:7px 16px;font-size:12.5px;color:#333;border-bottom:2px solid transparent}
#dlgFindReplace .fr-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
#dlgFindReplace .dlg-field label{min-width:52px}
#dlgFindReplace .dlg-field input{flex:1}
.fr-find-count{font-size:11px;color:#777;margin:4px 0 0 62px;min-height:14px}
.fr-options{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0 62px}
.fr-options label{font-size:11.5px;color:#444;display:flex;align-items:center;gap:5px;cursor:pointer}
.fr-options input{accent-color:var(--accent)}
#frNavList{max-height:180px;overflow-y:auto;margin-top:10px;border:1px solid #e0e0e0;border-radius:3px}
#frNavList .fr-result{padding:6px 10px;font-size:12px;cursor:pointer}
#frNavList .fr-result:hover{background:#eef4fa}
#frNavList .fr-result mark{background:#ffe59e}

/* Word count dialog */
#dlgWordCount .wc-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;padding:4px 8px}
#dlgWordCount .wc-grid .wc-label{font-size:12.5px;color:#333}
#dlgWordCount .wc-grid .wc-val{font-size:12.5px;text-align:right;font-weight:600}

/* Spelling dialog */
#dlgSpelling .sp-notin{font-size:12.5px;color:#333;margin-bottom:4px}
#dlgSpelling .sp-word-box{border:1px solid var(--input-border);background:#fff;padding:7px 10px;font-size:13px;border-radius:2px;min-height:34px;margin-bottom:12px}
#dlgSpelling .sp-suggest{min-height:120px;border:1px solid var(--input-border);background:#fff;border-radius:2px;padding:4px;overflow-y:auto;margin-bottom:12px}
#dlgSpelling .sp-suggest .sug-item{padding:5px 9px;border-radius:2px;font-size:12.5px;cursor:pointer}
#dlgSpelling .sp-suggest .sug-item:hover,.sp-suggest .sug-item.active{background:#d5e4f3}
#dlgSpelling .sp-lang{font-size:11px;color:#777;margin-bottom:8px}

/* Language dialog */
#dlgLanguage .lang-list{border:1px solid var(--input-border);background:#fff;height:210px;overflow-y:auto;border-radius:2px;margin-bottom:12px}
#dlgLanguage .lang-item{padding:6px 12px;font-size:12.5px;cursor:pointer}
#dlgLanguage .lang-item:hover{background:#eef4fa}
#dlgLanguage .lang-item.active{background:#d5e4f3;font-weight:600}

/* Hyperlink dialog */
#dlgLink .link-grid{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;align-items:center;margin-bottom:12px}
#dlgLink .link-grid input{border:1px solid var(--input-border);border-radius:2px;height:26px;padding:0 8px;background:#fff}

/* Symbol dialog */
#dlgSymbol .sym-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-bottom:12px;max-height:220px;overflow-y:auto}
#dlgSymbol .sym-cell{width:36px;height:32px;border:1px solid #e0e0e0;background:#fff;border-radius:2px;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#dlgSymbol .sym-cell:hover{background:#d5e4f3;border-color:var(--accent)}
#dlgSymbol .sym-cell.sel{background:#d5e4f3;border-color:var(--accent)}
#dlgSymbol .sym-preview{border:1px solid #e0e0e0;background:#fff;border-radius:2px;height:70px;display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:10px}
#dlgSymbol .sym-char-code{font-size:11.5px;color:#666;margin-left:12px}

/* Zoom dialog */
#dlgZoom .zoom-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
#dlgZoom .zoom-preset{padding:6px 14px;border:1px solid #d5d5d5;border-radius:3px;background:#fff;font-size:12px}
#dlgZoom .zoom-preset:hover{background:#eef4fa}
#dlgZoom .zoom-preset.active{background:#d5e4f3;border-color:var(--accent)}

/* Options dialog */
#dlgOptions{width:720px}
#dlgOptions .opt-cols{display:flex;gap:24px}
#dlgOptions .opt-cols .opt-left{flex:0 0 190px}
#dlgOptions .opt-cols .opt-right{flex:1}
.opt-left .opt-nav{padding:7px 12px;border-radius:3px;font-size:12.5px;cursor:pointer;color:#333}
.opt-left .opt-nav:hover{background:#eef4fa}
.opt-left .opt-nav.active{background:#d5e4f3;color:var(--accent);font-weight:600}
.opt-section{margin-bottom:16px}
.opt-section h4{font-size:12.5px;margin-bottom:8px;color:#333}
.opt-section select{height:26px;border:1px solid var(--input-border);border-radius:2px;padding:0 6px;background:#fff;min-width:180px}
.opt-section label{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:7px;cursor:pointer;color:#333}
.opt-section input[type=checkbox]{accent-color:var(--accent)}
.opt-theme-swatch{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid #bbb;vertical-align:-3px;margin-right:6px}
.opt-hint{font-size:11px;color:#888;margin:4px 0 8px}

/* Page setup / margins dialog */
#dlgPageSetup{width:560px}
.margin-steppers{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin:10px 0}
.margin-steppers .ms-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.margin-steppers label{font-size:12.5px;color:#333}
.margin-steppers input{width:70px;height:26px;border:1px solid var(--input-border);border-radius:2px;padding:0 8px;text-align:right;background:#fff}
.page-preview-box{width:150px;height:190px;border:1px solid #aaa;background:#fff;position:relative;margin:0 auto 10px;flex:0 0 auto}
.page-preview-box .pp-margin{position:absolute;border:1px dashed #c0504d}
.page-preview-box .pp-line{position:absolute;left:6px;right:6px;height:3px;background:#d0d0d0}

/* Columns dialog */
#dlgColumns{width:430px}
.col-presets{display:flex;gap:14px;margin-bottom:14px}
.col-preset{width:64px;text-align:center;cursor:pointer;font-size:11.5px;color:#444}
.col-preset .cp-glyph{height:52px;border:1px solid #c8c8c8;background:#fff;border-radius:3px;display:flex;gap:4px;padding:5px;margin-bottom:4px}
.col-preset .cp-glyph span{flex:1;background:#e8eef6}
.col-preset.active .cp-glyph{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.col-preset.active{color:var(--accent);font-weight:600}

/* Spelling & grammar */
.sp-rule-note{font-size:11.5px;color:#555;margin-bottom:10px;padding:6px 10px;background:#fdf6e3;border-left:3px solid #d9b44a;border-radius:2px}

/* Date & time */
#dlgDateTime{width:420px}
#dlgDateTime .dt-list{border:1px solid var(--input-border);background:#fff;height:190px;overflow-y:auto;border-radius:2px;margin-bottom:10px}
#dlgDateTime .dt-item{padding:6px 12px;font-size:12.5px;cursor:pointer}
#dlgDateTime .dt-item:hover{background:#eef4fa}
#dlgDateTime .dt-item.active{background:#d5e4f3}
#dlgDateTime .dt-format{font-size:11px;color:#777;margin:0 0 10px 2px}

/* Watermark dialog */
#dlgWatermark{width:460px}
#dlgWatermark .wm-preview{border:1px solid #d5d5d5;background:#fff;height:130px;display:flex;align-items:center;justify-content:center;border-radius:3px;margin-bottom:12px;overflow:hidden}
#dlgWatermark .wm-preview .wm-text{font-size:44px}

/* TOC */
#dlgToc{width:430px}
.toc-option{margin-bottom:8px;font-size:12.5px}

/* Print dialog elements in backstage */
.bs-print-page{display:flex;gap:24px;height:100%}
.bs-print-settings{width:300px;flex:0 0 auto;overflow-y:auto;padding-right:8px}
.bs-print-settings h3{font-size:13px;margin-bottom:8px;color:#333}
.bs-print-preview{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:20px;background:#f0f0f0;border-radius:6px;min-height:0}
.bs-print-sheet{background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.25);margin:10px 0;position:relative;overflow:hidden;flex:0 0 auto}
.bs-print-pageinfo{font-size:12px;color:#555;text-align:center;margin:2px 0 6px}
@media print{
  #backstage{display:none!important}
  #readmode{display:none!important}
}