/* ==========================================================================
   MS WORD ONLINE - DARK MODE THEME
   Dark Mode Canvas & UI Theme
   ========================================================================== */

body.dark-theme {
  --bg-app: #1f1f1f;
  --bg-surface: #2b2b2b;
  --bg-subtle: #242424;
  --bg-hover: #383838;
  --bg-active: #444444;
  --bg-ribbon: #252525;
  --bg-canvas: #181818;
  --border-subtle: #333333;
  --border-default: #404040;
  --border-strong: #666666;
  --text-primary: #e6e6e6;
  --text-secondary: #aaaaaa;
}

body.dark-theme .ribbon-tabs {
  background-color: #252525;
  border-bottom-color: #383838;
}

body.dark-theme .ribbon-content {
  background-color: #2b2b2b;
}

body.dark-theme .ribbon-group {
  border-right-color: #383838;
}

body.dark-theme .ribbon-select {
  background-color: #333333;
  border-color: #484848;
  color: #f0f0f0;
}

body.dark-theme .style-tile {
  background: #333333;
  border-color: #444444;
}

body.dark-theme .ruler-container {
  background-color: #222222;
  border-bottom-color: #383838;
}

body.dark-theme .ruler-track {
  background-color: #2e2e2e;
  border-color: #444444;
}

body.dark-theme .ruler-margin-left-shade,
body.dark-theme .ruler-margin-right-shade {
  background-color: #3e3e3e;
}

body.dark-theme .modal-window {
  background: #282828;
  color: #e6e6e6;
}

body.dark-theme .modal-header,
body.dark-theme .modal-footer {
  background: #202020;
  border-color: #383838;
}

body.dark-theme .form-control {
  background: #333333;
  border-color: #484848;
  color: #ffffff;
}

body.dark-theme .btn-dialog.secondary {
  background: #333333;
  border-color: #484848;
  color: #ffffff;
}

body.dark-theme .dropdown-menu {
  background: #282828;
  border-color: #404040;
}

body.dark-theme .dropdown-item:hover {
  background-color: #383838;
}

body.dark-theme .editor-side-panel {
  background: #252525;
  border-left-color: #383838;
}

body.dark-theme .side-panel-header {
  border-bottom-color: #383838;
}

body.dark-theme .comment-card {
  background: #2e2e2e;
  border-color: #3d3d3d;
}

/* Optional Dark Document Page mode */
body.dark-theme.dark-doc .doc-page {
  background-color: #242424;
  color: #e0e0e0;
}