/**
 * DZ-Word (كاتب الجزائر) — Microsoft Word Authentic UI Theme
 * Pure CSS implementing Microsoft 365 / Office desktop aesthetics.
 * 100% offline-first, sovereign Algerian document studio.
 */

:root {
  --word-blue: #185abd;
  --word-blue-dark: #103f91;
  --word-blue-darker: #0c3275;
  --word-blue-light: #2b78e4;
  --word-blue-surface: #eff6ff;
  --word-accent: #047857;
  --ribbon-bg: #f3f4f6;
  --ribbon-border: #d1d5db;
  --ribbon-hover: #e5e7eb;
  --ribbon-active: #dbeafe;
  --workspace-bg: #e2e8f0;
  --page-bg: #ffffff;
  --page-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --border-light: #cbd5e1;
  --ruler-bg: #e5e7eb;
  --status-bar-bg: #185abd;
  --status-bar-text: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', 'Cairo', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  background-color: var(--workspace-bg);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   1. Microsoft Word Title Bar
   ========================================================================== */
.word-titlebar {
  background: linear-gradient(90deg, var(--word-blue-dark) 0%, var(--word-blue) 100%);
  color: #ffffff;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 12px;
  font-size: 13px;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.word-app-icon {
  width: 26px;
  height: 26px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.word-app-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--word-blue);
}

/* Quick Access Toolbar */
.quick-access-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.qa-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.qa-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.qa-btn:active {
  background: rgba(255, 255, 255, 0.28);
}

.qa-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* AutoSave Switch */
.autosave-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.autosave-pill:hover {
  background: rgba(255, 255, 255, 0.25);
}

.autosave-toggle {
  width: 24px;
  height: 13px;
  background: #10b981;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
}

.autosave-toggle::after {
  content: '';
  position: absolute;
  top: 1.5px;
  right: 1.5px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
}

[dir="ltr"] .autosave-toggle::after {
  right: auto;
  left: 12.5px;
}

/* Title Center */
.titlebar-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
  max-width: 600px;
}

.doc-name-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-name-input {
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 2px 8px;
  border-radius: 4px;
  outline: none;
  text-align: center;
  min-width: 140px;
  max-width: 260px;
  font-family: inherit;
  transition: all 0.15s;
}

.doc-name-input:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.doc-name-input:focus {
  background: #ffffff;
  color: var(--text-dark);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.doc-saved-status {
  font-size: 11px;
  opacity: 0.85;
}

/* Office Search Pill */
.word-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 3px 12px;
  width: 220px;
  transition: all 0.15s;
}

.word-search-box:hover, .word-search-box:focus-within {
  background: #ffffff;
  color: var(--text-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.word-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 12px;
  width: 100%;
  font-family: inherit;
}

.word-search-box input::placeholder {
  color: inherit;
  opacity: 0.8;
}

.word-search-box svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Window Controls Right */
.titlebar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.titlebar-sovereign-tag {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.window-controls {
  display: flex;
  align-items: center;
}

.win-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.win-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.win-btn.close:hover {
  background: #dc2626;
}

.win-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

/* ==========================================================================
   2. Microsoft Word Ribbon Bar
   ========================================================================== */
.word-ribbon {
  background: #ffffff;
  border-bottom: 1px solid var(--ribbon-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  z-index: 90;
}

.word-ribbon.collapsed .ribbon-body {
  display: none;
}

/* Tabs Bar */
.ribbon-tabs {
  display: flex;
  align-items: stretch;
  background: #f8fafc;
  border-bottom: 1px solid var(--ribbon-border);
  padding: 0 6px;
  gap: 2px;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tab-btn:hover {
  background: var(--ribbon-hover);
  color: #0f172a;
}

.tab-btn.active {
  background: #ffffff;
  color: var(--word-blue);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--word-blue);
  border-radius: 2px 2px 0 0;
}

/* Special File Tab */
.tab-btn.tab-file {
  background: var(--word-blue-dark);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 4px 4px 0 0;
  font-weight: 700;
}

.tab-btn.tab-file:hover {
  background: var(--word-blue-darker);
}

/* Ribbon Content Body */
.ribbon-body {
  background: var(--ribbon-bg);
  min-height: 98px;
  padding: 6px 12px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  gap: 6px;
}

.ribbon-tab-pane {
  display: none;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.ribbon-tab-pane.active {
  display: flex;
}

/* Ribbon Group Container */
.ribbon-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-inline-end: 1px solid var(--ribbon-border);
  padding: 2px 8px;
  gap: 4px;
  flex-shrink: 0;
}

.group-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.group-tools-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

.group-tools-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.group-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  padding-top: 3px;
  font-weight: 500;
  user-select: none;
}

/* Big Split Buttons (e.g. Paste) */
.ribbon-btn-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 8px;
  min-width: 50px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-dark);
  transition: all 0.15s;
  gap: 3px;
}

.ribbon-btn-large:hover {
  background: #ffffff;
  border-color: var(--ribbon-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ribbon-btn-large svg {
  width: 26px;
  height: 26px;
  stroke: var(--word-blue);
}

.ribbon-btn-large span {
  font-size: 11px;
  font-weight: 600;
}

/* Standard Ribbon Button */
.ribbon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dark);
  transition: all 0.12s;
  position: relative;
}

.ribbon-btn:hover {
  background: #ffffff;
  border-color: var(--ribbon-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ribbon-btn:active, .ribbon-btn.active {
  background: var(--ribbon-active);
  border-color: #bfdbfe;
  color: var(--word-blue);
}

.ribbon-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.ribbon-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-dark);
  font-family: inherit;
  transition: all 0.15s;
}

.ribbon-btn-text:hover {
  background: #ffffff;
  border-color: var(--ribbon-border);
}

.ribbon-btn-text svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* Dropdown Selects in Ribbon */
.ribbon-select {
  font-family: inherit;
  font-size: 12px;
  height: 25px;
  background: #ffffff;
  border: 1px solid var(--ribbon-border);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--text-dark);
  cursor: pointer;
  outline: none;
}

.ribbon-select:hover {
  border-color: #94a3b8;
}

.ribbon-select:focus {
  border-color: var(--word-blue);
}

/* Color Tool with Underline Indicator */
.color-tool-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.color-tool-btn:hover {
  background: #ffffff;
  border-color: var(--ribbon-border);
}

.color-indicator-bar {
  width: 18px;
  height: 3px;
  border-radius: 1px;
  margin-top: 1px;
}

.color-tool-btn input[type="color"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Styles Gallery (Office Quick Styles) */
.styles-gallery {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 440px;
  overflow-x: auto;
  padding: 2px;
}

.style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--ribbon-border);
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 68px;
  height: 54px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  flex-shrink: 0;
}

.style-card:hover {
  border-color: var(--word-blue);
  box-shadow: 0 2px 4px rgba(24, 90, 189, 0.12);
}

.style-card.active {
  background: var(--word-blue-surface);
  border-color: var(--word-blue);
  box-shadow: 0 0 0 1px var(--word-blue);
}

.style-sample {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.style-name {
  font-size: 9.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   3. Horizontal and Vertical Rulers
   ========================================================================== */
.ruler-corner {
  width: 24px;
  height: 24px;
  background: var(--ruler-bg);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.ruler-horizontal-container {
  display: flex;
  background: var(--ruler-bg);
  height: 24px;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 60;
  overflow: hidden;
}

.ruler-horizontal {
  position: relative;
  height: 100%;
  background: #ffffff;
  margin: 0 auto;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.ruler-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid #94a3b8;
  pointer-events: none;
}

.ruler-tick.major {
  border-left-color: #475569;
}

.ruler-tick-label {
  position: absolute;
  bottom: 2px;
  font-size: 9px;
  color: #475569;
  transform: translateX(-50%);
  user-select: none;
}

.ruler-margin-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #cbd5e1;
  opacity: 0.6;
}

/* ==========================================================================
   4. Document Workspace & A4 Pages
   ========================================================================== */
.workspace-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Side Navigation Pane */
.navigation-pane {
  width: 260px;
  background: #ffffff;
  border-inline-end: 1px solid var(--ribbon-border);
  display: none;
  flex-direction: column;
  z-index: 50;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.navigation-pane.open {
  display: flex;
}

.nav-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ribbon-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  background: #f8fafc;
}

.nav-search-bar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ribbon-border);
}

.nav-search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--ribbon-border);
  border-radius: 4px;
  font-size: 12px;
  outline: none;
}

.nav-search-input:focus {
  border-color: var(--word-blue);
}

.nav-results-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.nav-result-item {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.nav-result-item:hover {
  background: var(--word-blue-surface);
  color: var(--word-blue);
}

/* Pages Scrollable Canvas */
.pages-canvas {
  flex: 1;
  overflow: auto;
  background: var(--workspace-bg);
  padding: 30px 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.document-sheet-container {
  transition: transform 0.15s ease;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Authentic A4 Page Sheet */
.word-page {
  width: 816px;
  min-height: 1056px;
  background: var(--page-bg);
  box-shadow: var(--page-shadow);
  border-radius: 2px;
  padding: 72px 72px;
  box-sizing: border-box;
  position: relative;
  outline: none;
  font-family: 'Amiri', 'Cairo', serif;
  font-size: 12pt;
  line-height: 1.8;
  color: var(--text-dark);
}

.word-page[dir="rtl"] {
  text-align: right;
}

.word-page[dir="ltr"] {
  text-align: left;
}

/* Watermark */
.page-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 64pt;
  font-weight: 800;
  color: rgba(203, 213, 225, 0.35);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 1;
  text-transform: uppercase;
}

/* Paragraph Marks Highlight (¶) */
.show-marks p::after {
  content: " ¶";
  color: #94a3b8;
  font-size: 10pt;
}

/* Focus / Read Mode */
body.mode-read .word-ribbon,
body.mode-read .ruler-horizontal-container,
body.mode-read .word-titlebar {
  display: none !important;
}

body.mode-read .pages-canvas {
  background: #fbfbfa;
  padding: 20px;
}

body.mode-read .word-page {
  box-shadow: none;
  border: 1px solid #e2e8f0;
}

/* ==========================================================================
   5. Interactive Floating Mini-Toolbar
   ========================================================================== */
.floating-mini-toolbar {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--ribbon-border);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 4px;
  display: none;
  align-items: center;
  gap: 3px;
  z-index: 1000;
}

.floating-mini-toolbar.visible {
  display: flex;
}

/* ==========================================================================
   6. Custom Right-Click Context Menu
   ========================================================================== */
.word-context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--ribbon-border);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  min-width: 180px;
  padding: 4px 0;
  display: none;
  z-index: 1100;
}

.word-context-menu.open {
  display: block;
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.1s;
}

.ctx-item:hover {
  background: var(--word-blue-surface);
  color: var(--word-blue);
}

.ctx-divider {
  height: 1px;
  background: var(--ribbon-border);
  margin: 4px 0;
}

/* ==========================================================================
   7. Microsoft Word Status Bar
   ========================================================================== */
.word-statusbar {
  background: var(--status-bar-bg);
  color: var(--status-bar-text);
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 500;
  z-index: 100;
  user-select: none;
}

.status-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.15s;
}

.status-item:hover {
  background: rgba(255, 255, 255, 0.18);
}

.status-item svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

/* Zoom Slider */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zoom-slider-bar {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.zoom-slider-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

/* ==========================================================================
   8. Fullscreen Word Backstage View (ملف - File)
   ========================================================================== */
.word-backstage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 2000;
  display: none;
}

.word-backstage.active {
  display: flex;
}

.backstage-sidebar {
  width: 250px;
  background: var(--word-blue-dark);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  gap: 4px;
}

.backstage-back-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 15px;
  font-family: inherit;
  transition: background 0.15s;
}

.backstage-back-btn:hover {
  background: var(--word-blue-darker);
}

.backstage-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: inherit;
  font-family: inherit;
  transition: background 0.15s;
}

.backstage-nav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.backstage-nav-btn.active {
  background: #ffffff;
  color: var(--word-blue-dark);
  font-weight: 700;
}

.backstage-nav-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.backstage-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px 60px;
  background: #f8fafc;
}

.backstage-pane {
  display: none;
}

.backstage-pane.active {
  display: block;
}

.backstage-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
}

/* Template Cards Grid in Backstage */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.template-tile {
  background: #ffffff;
  border: 1px solid var(--ribbon-border);
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.template-tile:hover {
  transform: translateY(-2px);
  border-color: var(--word-blue);
  box-shadow: 0 10px 20px rgba(24, 90, 189, 0.12);
}

.template-tile-icon {
  width: 60px;
  height: 75px;
  background: #f1f5f9;
  border: 1px solid var(--ribbon-border);
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-tile-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--word-blue);
}

.template-tile h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.template-tile span {
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================================================
   9. Microsoft Word Dialogs & Modals
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.modal-overlay.active {
  display: flex;
}

.word-dialog {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 520px;
  overflow: hidden;
}

.dialog-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

.dialog-close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
}

.dialog-close:hover {
  color: #dc2626;
}

.dialog-body {
  padding: 20px;
  font-size: 13px;
}

.dialog-footer {
  background: #f8fafc;
  border-top: 1px solid var(--border-light);
  padding: 10px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Word Count Table */
.stats-table {
  width: 100%;
  border-collapse: collapse;
}

.stats-table td {
  padding: 8px 4px;
  border-bottom: 1px solid #f1f5f9;
}

.stats-table td:last-child {
  text-align: end;
  font-weight: 700;
}

/* Table Size Grid Picker (10x8) */
.table-grid-picker {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  gap: 3px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--ribbon-border);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.grid-cell {
  width: 18px;
  height: 18px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.1s;
}

.grid-cell.highlight {
  background: #bfdbfe;
  border-color: var(--word-blue);
}

/* Buttons */
.btn-dialog {
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-dark);
}

.btn-dialog:hover {
  background: #f1f5f9;
}

.btn-dialog.primary {
  background: var(--word-blue);
  border-color: var(--word-blue);
  color: #ffffff;
}

.btn-dialog.primary:hover {
  background: var(--word-blue-dark);
}

/* Print styling */
@media print {
  body {
    background: #ffffff !important;
    overflow: visible !important;
  }

  .word-titlebar,
  .word-ribbon,
  .ruler-horizontal-container,
  .navigation-pane,
  .floating-mini-toolbar,
  .word-context-menu,
  .word-statusbar,
  .word-backstage,
  .modal-overlay {
    display: none !important;
  }

  .pages-canvas {
    padding: 0 !important;
    background: transparent !important;
  }

  .document-sheet-container {
    transform: none !important;
  }

  .word-page {
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }
}