/* ==========================================================================
   word-online.css — ظاهر «Word Online» (Microsoft 365) برای ابزار ورد آپ‌سئو
   این فایل باید بعد از word.css / word-ui.css / word-responsive.css لود شود.
   فقط ظاهر را تغییر می‌دهد؛ شناسه‌ها و منطق ابزار دست‌نخورده است.
   ========================================================================== */
.wd-app {
    --wd-blue: #0f6cbd;
    --wd-blue-dark: #115ea3;
    --wd-ribbon: #ffffff;
    --wd-line: #e0e0e0;
    --wd-canvas: #f5f5f5;
    --wd-text: #242424;
    --wd-hover: #f0f0f0;
    --wd-press: #e0e0e0;
    --wo-border: #d1d1d1;
    --wo-muted: #616161;
    font-family: "Segoe UI Variable", "Segoe UI", "Vazirmatn", Tahoma, Arial, sans-serif;
    font-size: 13px;
}
.editor-wrapper.wd-app {
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--wd-canvas) !important;
    box-shadow: none !important;
    outline: 1px solid #e4e4e4;
}

/* ============ Chrome ============ */
.wd-chrome {
    background: #f5f5f5 !important;
    border-bottom: 0 !important;
    padding: 0 8px 8px;
    border-radius: 10px 10px 0 0 !important;
}

/* ---- ردیف اول: برند + جستجو ---- */
.wd-titlebar {
    height: 56px; display: flex; align-items: center; gap: 10px; color: var(--wd-text); padding: 0 4px; direction: rtl;
}
.wd-brand { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.wd-waffle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #424242; text-decoration: none; }
.wd-waffle:hover { background: #e8e8e8; }
.wd-waffle .wd-i { width: 20px; height: 20px; }
.wd-applogo { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; }
.wd-applogo .wd-i { width: 30px; height: 30px; }
.wd-brand .wd-h1 { margin: 0; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: #242424; white-space: normal; flex: 0 1 auto; min-width: 0; }
.wd-chrome .wd-brand h1.header-h1-title, .wd-chrome .wd-brand h1.header-h1-title.wd-h1 { color: #242424 !important; -webkit-text-fill-color: #242424 !important; text-shadow: none !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; }
.wd-brand .wd-title {
    position: static !important; left: auto !important; right: auto !important; padding: 0 4px !important; text-align: start !important;
    font-size: 15px; font-weight: 400; color: #242424; pointer-events: auto; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; z-index: auto;
}
.wd-qbtn { color: #424242; border-radius: 6px; width: 32px; height: 32px; }
.wd-qbtn:hover { background: #e8e8e8; }
.wd-qbtn .wd-i { width: 20px; height: 20px; }
.wd-title-right { margin-inline-start: 0; margin-left: 0; padding: 0; flex: none; }

/* جستجو / Tell me */
.wd-tell {
    flex: 1 1 420px; max-width: 600px; min-width: 150px; margin: 0 auto; height: 38px; padding: 0 12px; gap: 8px;
    background: #fff; border: 1px solid var(--wo-border); border-radius: 8px; color: var(--wo-muted);
    box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: box-shadow .15s, border-color .15s;
}
.wd-tell .wd-i { width: 18px; height: 18px; color: #424242; }
.wd-tell .wd-i path, .wd-tell .wd-i circle { stroke: currentColor; }
.wd-tell input { height: 30px; color: #242424; font-size: 14px; }
.wd-tell input::placeholder { color: #616161; opacity: 1; }
.wd-tell:focus-within { background: #fff; border-color: var(--wd-blue); box-shadow: 0 0 0 1px var(--wd-blue); }
.wd-tell:focus-within .wd-i path, .wd-tell:focus-within .wd-i circle { stroke: currentColor; }
.wd-tell-results { left: 0; right: 0; width: auto; top: 44px; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; direction: rtl; }
.wd-tell-results button { border-radius: 4px; text-align: right; padding: 7px 10px; font-size: 13px; }
.wd-tell-results button:hover { background: #f0f0f0; }

/* ---- ردیف دوم: تب‌ها ---- */
.wd-tabs { height: 42px; background: transparent !important; align-items: center; gap: 2px; padding: 0 2px; direction: rtl; }
.wd-tab {
    height: 34px; padding: 0 12px; margin: 0; background: transparent !important; color: #242424 !important;
    font-size: 14px; border-radius: 6px; border: 0; font-family: inherit; position: relative;
}
.wd-tab:hover { background: #ebebeb !important; }
.wd-tab.is-active { background: transparent !important; color: #242424 !important; font-weight: 700; }
.wd-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 2px; background: var(--wd-blue); }
.wd-tab-file { background: transparent !important; min-width: 0; margin: 0; font-weight: 400; }
.wd-tab-file:hover { background: #ebebeb !important; }
.wd-ctx { margin: 0 4px; height: 34px; align-self: center; background: #e5f1fb; border-radius: 6px; padding-top: 0; }
.wd-ctx::before { display: none; }
.wd-ctx-label { position: static; height: auto; color: #115ea3; font-size: 12px; padding: 0 10px 0 4px; }
.wd-ctx .wd-tab.is-active { color: #242424 !important; }

/* دکمه‌های سمت چپ ردیف تب‌ها (مثل Comments / Editing / Share) */
.wd-editmode, .wd-act {
    height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; background: #fff; color: #242424;
    border: 1px solid var(--wo-border); border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.wd-editmode { margin-left: auto; margin-right: 6px; }
.wd-editmode .wd-i { width: 16px; height: 16px; }
.wd-editmode .wd-caret { width: 9px; height: 9px; }
.wd-editmode:hover, .wd-act:hover { background: #f5f5f5; border-color: #c4c4c4; }
.wd-actions { margin-left: 0; gap: 6px; height: auto; padding: 0 0 0 2px; align-items: center; }
.wd-act { border-radius: 6px; }
.wd-act .wd-i { width: 18px; height: 18px; }
.wd-act-lock { top: -4px; inset-inline-start: auto; inset-inline-end: -4px; box-shadow: 0 0 0 2px #f5f5f5; }
.wd-act[data-click="#downloadWord"] { background: var(--wd-blue); border-color: var(--wd-blue); color: #fff; }
.wd-act[data-click="#downloadWord"]:hover { background: var(--wd-blue-dark); border-color: var(--wd-blue-dark); }
.wd-act[data-click="#downloadWord"] .wd-i { filter: brightness(0) invert(1); }

/* ============ Ribbon: کارت گرد سفید ============ */
.wd-ribbon {
    background: #fff; height: 98px; border: 0 !important; border-radius: 8px; padding: 0 6px;
    box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14); overflow-x: auto; overflow-y: hidden;
}
.wd-app.ribbon-collapsed .wd-ribbon { display: none; }
.wd-panel { height: 96px; padding: 6px 0 0; }
.wd-group { border-right: 0 !important; border-left: 1px solid #e5e5e5; padding: 0 9px; }
.wd-group:last-child, .wd-panel > .wd-group:last-of-type { border-left: 0; }
.wd-group-body { height: 68px; padding-top: 2px; gap: 2px; }
.wd-group-body.wd-rows { gap: 4px; padding-top: 4px; }
.wd-group-label { height: 20px; line-height: 20px; font-size: 12px; color: var(--wo-muted); padding: 0 12px; }
.wd-dialog-launcher { color: #616161; }
.wd-row { height: 30px; gap: 2px; }

.wd-big, .wd-sm, .wd-ib, .wd-style, .wd-gallery-nav button { border-radius: 4px; border: 1px solid transparent; }
.wd-big { min-width: 50px; height: 66px; padding: 4px 6px; gap: 3px; }
.wd-big .wd-i { width: 34px; height: 34px; }
.wd-big span { font-size: 12px; color: #242424; }
.wd-sm { height: 24px; font-size: 12px; }
.wd-sm .wd-i { width: 18px; height: 18px; }
.wd-sm.wd-sm-icon { min-width: 36px; height: 31px; justify-content: center; padding: 0; }
.wd-sm.wd-sm-icon .wd-i { width: 20px; height: 20px; }
.wd-g-undo .wd-sm-icon { color: #115ea3; }
.wd-ib { min-width: 30px; height: 30px; }
.wd-ib .wd-i { width: 20px; height: 20px; }
.wd-ib-arrow { height: 30px; width: 12px; margin-left: -6px; }
.wd-txt { font-size: 15px; min-width: 30px; color: #242424; }
.wd-vsep { height: 22px; background: #e0e0e0; margin: 0 4px; }
.wd-big:hover, .wd-sm:hover, .wd-ib:hover, .wd-gallery-nav button:hover { background: #f0f0f0; border-color: transparent; }
.wd-big:active, .wd-sm:active, .wd-ib:active { background: #e0e0e0; }
.toolbar button.active, .wd-ib.active, .wd-ib.active:hover { background: #e5e5e5 !important; border-color: #c4c4c4 !important; }
.wd-dis { opacity: .4; }

.wd-select {
    height: 30px; border: 1px solid var(--wo-border); border-radius: 4px; background: #fff; color: #242424;
    font-size: 13px; padding: 0 6px; font-family: inherit;
}
.wd-select:hover { border-color: #b0b0b0; }
.wd-select:focus { border-color: var(--wd-blue); box-shadow: 0 0 0 1px var(--wd-blue); }
.wd-sel-font { width: 150px; }
.wd-sel-size { width: 56px; }
.wd-bar { height: 3px; bottom: 2px; border-radius: 1px; }

/* گالری سبک‌ها */
.wd-g-styles { border-left: 1px solid #e5e5e5; }
.wd-gallery-body { align-items: center; }
.wd-gallery { gap: 6px !important; }
.wd-style { width: 84px; height: 62px; background: #fff; border: 1px solid var(--wo-border); border-radius: 6px; }
.wd-style:hover { background: #f5f5f5; border-color: #b0b0b0; }
.wd-style.is-current { border-color: var(--wd-blue); box-shadow: 0 0 0 1px var(--wd-blue); background: #fff; }
.wd-gallery-nav { width: 22px; border: 0; background: transparent; height: 62px; margin-inline-start: 4px; }
.wd-gallery-nav button { font-size: 14px; border: 0 !important; color: #424242; }
.wd-style-menu { border-radius: 8px; }

/* ============ بوم و برگه ============ */
.wd-workspace { background: #f5f5f5 !important; padding: 18px 0 36px; }
.wd-page { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.10) !important; border-radius: 0; }

/* ============ نوار وضعیت ============ */
.wd-status {
    height: 30px; background: #fafafa !important; border-top: 1px solid #e0e0e0 !important; color: #424242; font-size: 12px; padding: 0 12px; gap: 14px;
    border-radius: 0 0 10px 10px; direction: rtl;
}
.wd-status .wd-sitem { padding: 2px 6px; border-radius: 4px; }
.wd-status .wd-sitem:hover { background: #ebebeb; }
.wd-status .wd-right { margin-left: 0; margin-right: auto; gap: 6px; direction: ltr; }
.wd-status .wd-vbtn { width: 28px; height: 24px; border-radius: 4px; }
.wd-status .wd-vbtn:hover { background: #ebebeb; }
.wd-status .wd-vbtn.is-active { background: #e0e0e0; border: 1px solid #c4c4c4; }
.wd-zoom-btn { width: 22px; height: 22px; border-radius: 4px; font-size: 17px; color: #424242; }
.wd-zoom-btn:hover { background: #ebebeb; }
.wd-zoom-slider { width: 128px; height: 4px; border-radius: 2px; background: linear-gradient(to right, #c8c8c8, #c8c8c8); }
.wd-zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--wd-blue); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--wd-blue); cursor: pointer; }
.wd-zoom-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--wd-blue); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--wd-blue); cursor: pointer; }
.wd-zoom-val { min-width: 42px; text-align: center; }
.wd-fitbtn { height: 24px; padding: 0 8px; border: 0; background: transparent; border-radius: 4px; color: #242424; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wd-fitbtn:hover { background: #ebebeb; }

/* ============ منوها و دیالوگ‌ها ============ */
.wd-menu { border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; font-size: 13px; }
.wd-menu button { border-radius: 4px; padding: 6px 12px; font-size: 13px; }
.wd-menu button:hover { background: #f0f0f0 !important; }
.wd-dialog { border: 0; border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.28); font-size: 13px; overflow: hidden; }
.wd-dialog-head { height: 46px; padding: 0 18px; font-size: 16px; font-weight: 600; background: #fff; border-bottom: 1px solid #ececec; }
.wd-dialog-foot { padding: 12px 18px 16px; }
.wd-btn { height: 32px; min-width: 84px; border: 1px solid var(--wo-border); border-radius: 6px; background: #fff; color: #242424; font-size: 13px; }
.wd-btn:hover { background: #f5f5f5; border-color: #b0b0b0; }
.wd-btn.is-primary { background: var(--wd-blue); border-color: var(--wd-blue); color: #fff; }
.wd-btn.is-primary:hover { background: var(--wd-blue-dark); }
.wd-overlay { background: rgba(0,0,0,.32); }
.wd-bs-nav { background: #f5f5f5; color: #242424; width: 220px; padding-top: 12px; }
.wd-bs-nav .wd-bs-item { color: #242424; font-size: 14px; border-radius: 6px; width: calc(100% - 16px); margin: 0 8px 2px; padding: 10px 16px; }
.wd-bs-nav .wd-bs-item:hover { background: #e8e8e8; }
.wd-bs-main h2 { font-family: inherit; font-weight: 600; }

/* حالت «مشاهده» (فقط‌خواندنی) */
.wd-app.wd-viewing .wd-ribbon { opacity: .55; pointer-events: none; }

/* ============ واکنش‌گرا ============ */
@media (max-width: 1100px) {
    .wd-tell { flex-basis: 260px; }
}
@media (max-width: 820px) {
    .wd-titlebar { height: 48px; gap: 6px; }
    .wd-waffle { display: none; }
    .wd-tell { flex-basis: 120px; min-width: 100px; height: 34px; }
    .wd-editmode span { display: none; }
    .wd-tab { padding: 0 9px; font-size: 13px; }
}
@media (max-width: 600px) {
    .wd-applogo { display: none; }
    .wd-tell { flex: 1 1 auto; max-width: none; }
    .wd-editmode { display: none; }
    .wd-chrome { padding: 0 4px 6px; }
}

/* ============ تنظیم دقیق‌تر ریبون (فشرده‌تر مثل Word Online) ============ */
.wd-g-clip .wd-stack { gap: 0; }
.wd-g-clip .wd-sm { min-width: 34px; width: 34px; height: 24px; justify-content: center; padding: 0; }
.wd-g-clip .wd-sm span { display: none; }
.wd-g-clip .wd-sm .wd-i { width: 18px; height: 18px; }
.wd-g-styles { flex: 1 1 300px; min-width: 190px; }
.wd-gallery-body { min-width: 0; overflow: hidden; }
.wd-gallery { overflow: hidden !important; flex: 1 1 auto !important; min-width: 0; }
.wd-style { flex: none; }
.wd-sel-font { width: 138px; }
.wd-group { padding: 0 7px; }
.wd-g-edit .wd-sm-wide { min-width: 86px; }
.wd-group { padding: 0 5px; }
.wd-sel-font { width: 126px; }
.wd-style { width: 72px; height: 60px; }
.wd-gallery { gap: 4px !important; }
.wd-gallery-nav { width: 18px; margin-inline-start: 2px; }
.wd-ib { min-width: 28px; }
.wd-txt { min-width: 28px; }
.wd-g-styles { flex: 0 1 262px; min-width: 150px; }
.wd-big { min-width: 46px; padding: 4px 3px; }

/* ---- گالری: آیتم‌های نیمه‌دیده به سطر پنهان بروند ---- */
.wd-gallery { flex-wrap: wrap !important; height: 62px; align-content: flex-start; }

/* ---- File / Backstage مثل Word Online ---- */
.wd-backstage { background: #fff; border-radius: 10px; overflow: hidden; }
.wd-bs-nav { background: #f5f5f5 !important; color: #242424 !important; border-left: 1px solid #e5e5e5; }
.wd-bs-back { color: #242424 !important; font-size: 20px; width: 48px; height: 48px; margin: 6px 8px; border-radius: 6px; }
.wd-bs-back:hover { background: #e8e8e8 !important; }
.wd-bs-nav .wd-bs-item { color: #242424 !important; }
.wd-bs-main { padding: 36px 56px; }
.wd-bs-main h2 { font-size: 28px; font-weight: 600; margin-bottom: 18px; }
.wd-bs-main .wd-bs-big { border-radius: 8px; background: #fff; border: 1px solid #d1d1d1; padding: 12px 20px; }
.wd-bs-main .wd-bs-big:hover { background: #f5f5f5; border-color: #0f6cbd; }

/* ============ صفحه‌بندی بصری (برگه‌های جدا مثل Word) ============ */
.wd-workspace { overflow-anchor: none; }
#wdPageGaps { position: absolute; inset: 0; pointer-events: none; }
#wdPage > #wdHeader, #wdPage > #wdFooter, #wdPage > #editor { position: relative; z-index: 1; }
#wdPageGaps .wd-pgap { position: absolute; z-index: 3; left: -4px; right: -4px; border-top: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; box-shadow: inset 0 6px 8px -6px rgba(0,0,0,.22), inset 0 -6px 8px -6px rgba(0,0,0,.22); }
#wdPageGaps .wd-pnum { position: absolute; z-index: 3; right: -34px; width: 26px; text-align: left; direction: ltr; font: 13px/1 "Segoe UI", Tahoma, sans-serif; color: #616161; }
.editor-wrapper.wd-paginated .page-break-overlay { display: none !important; }
@media print { #wdPageGaps { display: none !important; } }
#wdPageGaps .wd-pgap.under { z-index: 0; }

/* تکرار هدر و فوتر در همه‌ی صفحه‌ها (کپی‌های نمایشی؛ ویرایش از هر کدام باز می‌شود) */
#wdPageGaps .wd-hfc { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: auto; box-sizing: border-box; overflow: hidden; }
#wdPageGaps .wd-hfc-h { padding-top: var(--wd-hdr-top); }
#wdPageGaps .wd-hfc-f { padding-bottom: var(--wd-ftr-bot); display: flex; flex-direction: column; justify-content: flex-end; }
.wd-page.hf-editing #wdPageGaps .wd-hfc { display: none; }
.wd-app.wd-paginated #wdFooter:not(.is-editing) .wd-hf-edit { visibility: hidden; }
#wdPageGaps .wd-pmask { position: absolute; left: 0; right: 0; z-index: 2; }
#wdPageGaps .wd-pline { position: absolute; z-index: 2; box-sizing: border-box; height: 0; }

/* موبایل/تبلت: نوار دکمه‌های «ورد / PDF / چاپ» در word-ui.css زمینه‌ی آبیِ قدیمی دارد؛ با ظاهر روشن Word Online هماهنگ شود */
@media (max-width: 900px) {
    .wd-actions { background: #f5f5f5 !important; box-shadow: 8px 0 8px -4px rgba(0,0,0,.12) !important; height: auto !important; padding: 0 4px 0 6px !important; }
    .wd-act { height: 32px; padding: 0 10px; }
}